/* ── FRANJA BANDERA ── */
.spain-stripe { height:5px; background:linear-gradient(90deg, #C60B1E 0%, #C60B1E 25%, #F1BF00 25%, #F1BF00 75%, #C60B1E 75%); }
/* ============================================================
   FONTANEROS LANDING — style.css
   Sistema de diseño móvil-first para SEM y SEO
   ============================================================ */

:root {
  --blue:    #0B2545;
  --blue2:   #1B3A6B;
  --blue3:   #243F72;
  --orange:  #C60B1E;
  --orange2: #E01020;
  --gold:    #F1BF00;
  --gold2:   #E8A800;
  --white:   #FFFFFF;
  --gray:    #F4F6FA;
  --gray2:   #E2E8F0;
  --text:    #1A2B4A;
  --muted:   #64748B;
  --green:   #16A34A;
  --red:     #DC2626;
  --bar-h:   68px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'Barlow', 'Segoe UI', sans-serif; color: var(--text); background: #fff; padding-bottom: var(--bar-h); }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }

/* ── TIPOGRAFÍA ── */
h1,h2,h3 { font-family: 'Barlow Condensed', 'Impact', sans-serif; }

/* ── HERO ── */
.hero { background: var(--blue); position: relative; overflow: hidden; }
.hero::before { content:''; position:absolute; top:-80px; right:-80px; width:320px; height:320px; border-radius:50%; background:var(--blue2); opacity:.5; }
.hero::after  { content:''; position:absolute; bottom:-60px; left:-60px; width:200px; height:200px; border-radius:50%; background:var(--orange); opacity:.12; }

.hero-topbar { background:var(--orange); display:flex; align-items:center; justify-content:space-between; padding:10px 20px; font-size:13px; font-weight:600; color:#fff; position:relative; z-index:2; }

.hero-body { position:relative; z-index:2; padding:32px 20px 36px; text-align:center; }

.hero-badge { display:inline-block; background:var(--orange); color:#fff; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 14px; border-radius:20px; margin-bottom:14px; }

.hero h1 { font-size: clamp(52px, 14vw, 86px); font-weight:900; color:#fff; line-height:.92; text-transform:uppercase; letter-spacing:-.01em; }
.hero h1 .zona { color:var(--orange); display:block; }

.hero-sub { color:#9BB8D4; font-size:15px; margin-top:14px; line-height:1.5; }
.hero-sub strong { color:#fff; }

.hero-trust { display:flex; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.trust-item { display:flex; align-items:center; gap:6px; color:#fff; font-size:13px; font-weight:600; padding:8px 13px; border-right:1px solid rgba(255,255,255,.15); }
.trust-item:last-child { border-right:none; }

.btn-call { display:flex; align-items:center; justify-content:center; gap:10px; background:var(--orange); color:#fff; font-family:'Barlow Condensed','Impact',sans-serif; font-size:23px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:16px 36px; border-radius:8px; margin:24px auto 0; max-width:320px; box-shadow:0 8px 24px rgba(198,11,30,.45); transition:transform .15s, box-shadow .15s; position:relative; overflow:hidden; }
.btn-call::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 60%); pointer-events:none; }
.btn-call:active { transform:scale(.97); }
.pulse { width:10px; height:10px; background:var(--gold); border-radius:50%; animation:pulse 1.4s infinite; flex-shrink:0; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.6)} }

.hero-phone { color:#9BB8D4; font-size:13px; text-align:center; margin-top:10px; }
.hero-phone strong { color:#fff; }

/* ── STARS BAR ── */
.stars-bar { background:var(--gray); display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 20px; font-size:14px; font-weight:600; color:var(--text); flex-wrap:wrap; }
.stars { color:#F59E0B; font-size:17px; letter-spacing:2px; }

/* ── SECCIONES GENÉRICAS ── */
.section { padding:40px 20px; }
.section-dark { background:var(--blue); padding:40px 20px; }
.section-gray { background:var(--gray); padding:40px 20px; }

.section-title { font-size:32px; font-weight:800; text-transform:uppercase; color:var(--blue); margin-bottom:6px; }
.section-title span { color:var(--orange); }
.section-title-white { color:#fff; }
.section-sub { color:var(--muted); font-size:14px; margin-bottom:24px; }
.section-sub-white { color:#9BB8D4; margin-bottom:24px; font-size:14px; }

/* ── SERVICIOS ── */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.svc-card { background:var(--gray); border-radius:10px; padding:18px 12px; text-align:center; border:2px solid transparent; transition:border-color .2s,background .2s; }
.svc-card:hover { border-color:var(--orange); background:#fff; }
.svc-icon { font-size:28px; margin-bottom:8px; }
.svc-name { font-size:11.5px; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:.04em; line-height:1.3; }

/* ── PRECIOS ── */
.price-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.price-card { background:var(--blue2); border-radius:10px; padding:16px; display:flex; justify-content:space-between; align-items:center; border-left:3px solid var(--gold); }
.price-card.free { border-left-color:var(--green); }
.price-name { font-size:13px; color:#9BB8D4; font-weight:500; }
.price-val { font-family:'Barlow Condensed','Impact',sans-serif; font-size:22px; font-weight:800; color:#fff; white-space:nowrap; }
.price-val.green { color:#4ADE80; }

/* ── PASOS ── */
.steps-list { display:flex; flex-direction:column; gap:0; }
.step { display:flex; gap:16px; padding:16px 0; position:relative; }
.step:not(:last-child)::after { content:''; position:absolute; left:19px; top:52px; width:2px; height:calc(100% - 20px); background:var(--gray2); }
.step-num { width:40px; height:40px; background:var(--orange); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed','Impact',sans-serif; font-size:20px; font-weight:800; flex-shrink:0; z-index:1; }
.step-body h3 { font-size:16px; font-weight:700; margin-bottom:4px; font-family:'Barlow','Segoe UI',sans-serif; }
.step-body p { font-size:13px; color:var(--muted); line-height:1.5; }

/* ── GARANTÍAS ── */
.guar-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.guar-card { display:flex; flex-direction:column; align-items:center; text-align:center; background:#fff; border-radius:12px; padding:20px 14px; border:1px solid var(--gray2); }
.guar-icon { font-size:28px; margin-bottom:8px; }
.guar-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; }
.guar-desc { font-size:11.5px; color:var(--muted); line-height:1.4; }

/* ── RESEÑAS ── */
.review-cards { display:flex; flex-direction:column; gap:12px; }
.review-card { background:#fff; border-radius:12px; padding:18px; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.review-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.review-avatar { width:40px; height:40px; background:var(--blue); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0; }
.review-name { font-weight:700; font-size:14px; }
.review-date { font-size:11px; color:var(--muted); }
.review-stars { color:#F59E0B; font-size:13px; margin-left:auto; }
.review-text { font-size:13px; color:var(--muted); line-height:1.6; }
.review-zona { display:inline-block; background:var(--gray); color:var(--orange); font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; margin-top:8px; }

/* ── FORMULARIO ── */
.form-box { background:var(--blue); border-radius:16px; padding:28px 20px; }
.form-title { font-size:26px; font-weight:800; color:#fff; text-transform:uppercase; margin-bottom:6px; }
.form-title span { color:var(--orange); }
.form-sub { color:#9BB8D4; font-size:13px; margin-bottom:20px; }
.form-group { margin-bottom:12px; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; background:var(--blue2); border:1.5px solid rgba(255,255,255,.1);
  border-radius:8px; padding:13px 16px; color:#fff; font-family:'Barlow','Segoe UI',sans-serif;
  font-size:15px; outline:none; transition:border-color .2s; -webkit-appearance:none;
}
.form-group input::placeholder, .form-group textarea::placeholder { color:rgba(255,255,255,.35); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--orange); }
.form-group select option { background:var(--blue2); color:#fff; }
.form-group textarea { resize:none; height:80px; }
.btn-submit { width:100%; background:var(--orange); color:#fff; border:none; border-radius:8px; padding:15px; font-family:'Barlow Condensed','Impact',sans-serif; font-size:20px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; cursor:pointer; box-shadow:0 6px 20px rgba(198,11,30,.4); transition:transform .15s; }
.btn-submit:active { transform:scale(.98); }
.form-legal { font-size:11px; color:rgba(255,255,255,.35); margin-top:10px; text-align:center; }
.form-success { background:#166534; color:#fff; border-radius:8px; padding:16px; text-align:center; font-size:15px; font-weight:600; display:none; margin-top:12px; }

/* ── ZONAS ── */
.zonas-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.zona-link { display:block; background:var(--gray); border-radius:8px; padding:10px 8px; text-align:center; font-size:12px; font-weight:600; color:var(--text); transition:background .15s,color .15s; line-height:1.3; }
.zona-link:hover { background:var(--orange); color:#fff; }

/* ── BARRA SEO (solo páginas de zona) ── */
.seo-section { padding:36px 20px; border-top:1px solid var(--gray2); }
.seo-section h2 { font-size:22px; font-weight:800; text-transform:uppercase; color:var(--blue); margin-bottom:12px; }
.seo-section h2 span { color:var(--orange); }
.seo-section p { font-size:14px; color:var(--muted); line-height:1.7; margin-bottom:12px; }

/* ── FOOTER ── */
footer { background:var(--blue); color:#9BB8D4; text-align:center; padding:24px 20px; font-size:12px; border-top:3px solid var(--orange); }
footer strong { color:#fff; }
footer a { color:#9BB8D4; }

/* ── STICKY BAR ── */
.sticky-bar { position:fixed; bottom:0; left:0; right:0; height:var(--bar-h); background:var(--blue); display:grid; grid-template-columns:1fr 1fr; z-index:999; box-shadow:0 -4px 20px rgba(0,0,0,.25); }
.sticky-btn { display:flex; align-items:center; justify-content:center; gap:8px; color:#fff; font-family:'Barlow Condensed','Impact',sans-serif; font-size:19px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; transition:filter .15s; }
.sticky-btn:active { filter:brightness(.85); }
.sticky-btn.call { background:var(--orange); }
.sticky-btn.whatsapp { background:#25D366; }

/* ── ANIMACIONES ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
.hero-body > * { animation:fadeUp .5s ease both; }
.hero-badge  { animation-delay:.05s; }
.hero h1     { animation-delay:.12s; }
.hero-sub    { animation-delay:.18s; }
.hero-trust  { animation-delay:.24s; }
.btn-call    { animation-delay:.30s; }

/* ── RESPONSIVE DESKTOP ── */
@media(min-width:600px) {
  .hero h1 { font-size:100px; }
  .services-grid { grid-template-columns:repeat(4,1fr); }
  .price-grid { grid-template-columns:repeat(3,1fr); }
  .guar-grid { grid-template-columns:repeat(4,1fr); }
  .zonas-grid { grid-template-columns:repeat(4,1fr); }
  .info-cols { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
}
@media(min-width:900px) {
  .hero-body { padding:48px 40px 48px; max-width:700px; margin:0 auto; }
  .section, .section-dark, .section-gray, .seo-section { padding-left:40px; padding-right:40px; }
  .max-w { max-width:900px; margin:0 auto; }
}