/* =============================================================
   landing-hero.css — Hero · Mockup de teléfono · Animaciones
   ============================================================= */

/* === HERO === */
.hero {
  padding:  80px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content:        "";
  position:       absolute;
  top: -100px; right: -200px;
  width:          600px;
  height:         600px;
  background:     radial-gradient(circle, rgba(201,95,46,0.18) 0%, transparent 60%);
  pointer-events: none;
}

.hero-grid {
  display:               grid;
  grid-template-columns: 1.1fr 1fr;
  gap:                   60px;
  align-items:           center;
  position:              relative;
}

/* Pill "Software hecho en San Juan" */
.pill {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  padding:        6px 14px;
  background:     var(--ink);
  color:          var(--cream);
  border-radius:  50px;
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight:    500;
  margin-bottom:  24px;
}

.pill::before {
  content:      "";
  width:        6px;
  height:       6px;
  border-radius: 50%;
  background:   #6fbf5e;
  box-shadow:   0 0 0 2px rgba(111,191,94,0.3);
}

/* === H1 === */
h1 {
  font-family:    var(--font-serif);
  font-size:      clamp(44px, 6.5vw, 76px);
  line-height:    0.97;
  letter-spacing: -0.035em;
  font-weight:    300;
  margin-bottom:  24px;
  color:          var(--ink);
}

h1 em { font-style: italic; color: var(--copper); font-weight: 400; }

h1 .strike {
  position: relative;
  display:  inline-block;
  color:    var(--ink-soft);
}

h1 .strike::after {
  content:       "";
  position:      absolute;
  left: -2%; right: -2%;
  top:           52%;
  height:        4px;
  background:    var(--copper);
  border-radius: 2px;
  transform:     rotate(-3deg);
}

/* === SUBTÍTULO + CTAs === */
.hero-sub {
  font-size:     18px;
  color:         var(--ink-soft);
  max-width:     510px;
  margin-bottom: 36px;
  line-height:   1.55;
}

.hero-ctas {
  display:       flex;
  gap:           14px;
  align-items:   center;
  flex-wrap:     wrap;
  margin-bottom: 40px;
}

.hero-trust {
  display:     flex;
  align-items: center;
  gap:         18px;
  flex-wrap:   wrap;
  color:       var(--ink-soft);
  font-size:   13px;
}

.hero-trust .dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--ink-soft);
  opacity:       0.4;
}

.hero-trust strong { color: var(--ink); font-weight: 600; }

/* === PHONE MOCKUP === */
.phone-frame {
  position:      relative;
  margin:        0 auto;
  width:         100%;
  max-width:     380px;
  aspect-ratio:  9/19;
  background:    var(--ink);
  border-radius: 36px;
  padding:       12px;
  box-shadow:
    0 30px 80px -20px rgba(15,10,7,0.4),
    0 0 0 1px rgba(0,0,0,0.1);
  transform:     rotate(-2deg);
}

.phone-screen {
  background:    var(--cream);
  border-radius: 26px;
  height:        100%;
  overflow:      hidden;
  position:      relative;
  border:        1px solid #000;
}

.phone-notch {
  position:      absolute;
  top: 8px; left: 50%;
  transform:     translateX(-50%);
  width:         90px;
  height:        22px;
  background:    var(--ink);
  border-radius: 12px;
  z-index:       5;
}

.phone-content {
  padding:  38px 18px 16px;
  height:   100%;
  overflow: hidden;
}

.ph-brand {
  font-family:   var(--font-serif);
  font-style:    italic;
  font-size:     18px;
  font-weight:   400;
  margin-bottom: 14px;
}

.ph-brand span { color: var(--copper); font-style: normal; font-weight: 600; }

.ph-h1 {
  font-family:    var(--font-serif);
  font-size:      26px;
  font-weight:    300;
  line-height:    1;
  letter-spacing: -0.02em;
  margin-bottom:  4px;
}

.ph-h1 em { font-style: italic; color: var(--copper); }

.ph-sub {
  font-size:     11px;
  color:         var(--ink-soft);
  margin-bottom: 14px;
}

.ph-svc {
  background:    white;
  border:        1.5px solid var(--copper);
  border-radius: 10px;
  padding:       11px 12px;
  margin-bottom: 8px;
  display:       flex;
  align-items:   center;
  gap:           10px;
  box-shadow:    0 0 0 3px rgba(201,95,46,0.1);
}

.ph-svc.alt { border-color: var(--line); box-shadow: none; }

.ph-svc-icon {
  width:         28px;
  height:        28px;
  border-radius: 50%;
  background:    var(--copper);
  color:         white;
  display:       grid;
  place-items:   center;
  flex-shrink:   0;
}

.ph-svc.alt .ph-svc-icon { background: var(--ink); color: var(--copper); }

.ph-svc-name { font-size: 12px; font-weight: 500; flex: 1; }

.ph-svc-time {
  font-family: var(--font-mono);
  font-size:   10px;
  color:       var(--ink-soft);
  display:     block;
}

.ph-svc-price {
  font-family: var(--font-serif);
  font-size:   16px;
  color:       var(--copper);
  font-weight: 400;
}

.ph-cta {
  margin-top:    12px;
  background:    var(--ink);
  color:         var(--cream);
  border-radius: 8px;
  padding:       11px;
  text-align:    center;
  font-size:     12px;
  font-weight:   600;
}

.ph-floating {
  position:      absolute;
  bottom: 18px; right: 14px;
  width:         38px;
  height:        38px;
  border-radius: 50%;
  background:    #25d366;
  display:       grid;
  place-items:   center;
  box-shadow:    0 8px 20px rgba(37,211,102,0.4);
  color:         white;
  animation:     pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(37,211,102,0.4), 0 0 0 0 rgba(37,211,102,0.5); }
  50%       { box-shadow: 0 8px 20px rgba(37,211,102,0.4), 0 0 0 10px rgba(37,211,102,0); }
}