/* ============================================================
   bigpickle — PLANTILLA DE LANDING DE SERVICIO
   CSS compartido por las 7 landings (web-design, cro,
   google-ads-seo, crm-email, analytics, optimisation, strategy).
   Cargar DESPUÉS de tokens.css y shared.css:
     <link rel="stylesheet" href="tokens.css">
     <link rel="stylesheet" href="shared.css">
     <link rel="stylesheet" href="landing.css">
   Cada página solo cambia su CONTENIDO, nunca este CSS.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Bebas+Neue&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--black);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
}

/* ── NAV ── */
nav { position:fixed; top:0; left:0; right:0; z-index:500; padding:1.2rem 4rem; display:flex; justify-content:space-between; align-items:center; background:rgba(8,8,8,.92); border-bottom:1px solid var(--muted); backdrop-filter:blur(12px); }
.logo-wrap { display:flex; flex-direction:column; text-decoration:none; }
.logo { font-family:'Bebas Neue',sans-serif; font-size:2rem; letter-spacing:.12em; color:var(--neon); line-height:1; }
.logo-sub { font-size:.55rem; font-weight:400; letter-spacing:.25em; text-transform:uppercase; color:var(--dim); margin-top:.15rem; }
nav ul { list-style:none; display:flex; gap:2.5rem; align-items:center; }
nav a { color:var(--dim); text-decoration:none; font-size:.8rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; transition:color .3s; }
nav a:hover { color:var(--neon); }
nav a.active { color:var(--neon); }
.nav-cta { padding:.6rem 1.6rem; border:1px solid var(--green); color:var(--green) !important; transition:background .3s,color .3s !important; }
.nav-cta:hover { background:var(--green); color:var(--black) !important; }

/* ── HERO ── */
.landing-hero { padding:10rem 4rem 5rem; text-align:center; max-width:900px; margin:0 auto; }
.landing-hero .tag { font-size:.85rem; font-weight:500; letter-spacing:.35em; text-transform:uppercase; color:var(--green); margin-bottom:1.2rem; }
.landing-hero h1 { font-family:'Bebas Neue',sans-serif; font-size:clamp(3.5rem,8vw,7rem); line-height:.88; color:var(--white); margin-bottom:1.5rem; }
.landing-hero h1 em { color:var(--neon); font-style:normal; }
.landing-hero p.lead { font-size:1.1rem; font-weight:300; color:var(--dim); line-height:1.9; max-width:600px; margin:0 auto; }
.landing-hero .hero-cta { margin-top:2.5rem; }

/* ── SECTION SHELL ── */
.bp-section { padding:6rem 4rem; border-top:1px solid var(--muted); }
.bp-inner { max-width:1000px; margin:0 auto; }
.bp-eyebrow { font-size:.85rem; font-weight:500; letter-spacing:.35em; text-transform:uppercase; color:var(--green); margin-bottom:1.2rem; }
.bp-h2 { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.5rem,5vw,4.5rem); line-height:.88; color:var(--white); margin-bottom:1.5rem; }
.bp-h2 em { color:var(--neon); font-style:normal; }
.bp-intro { font-size:1.1rem; font-weight:300; color:var(--dim); line-height:1.9; max-width:680px; }

/* ── CARDS / GRIDS ── */
.bp-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; margin-top:2.5rem; }
.bp-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
.bp-card { background:var(--gray); border:1px solid var(--muted); padding:2rem; transition:border-color .3s, transform .2s; }
.bp-card h3 { font-family:'Bebas Neue',sans-serif; font-size:1.5rem; letter-spacing:.03em; color:var(--white); margin-bottom:.7rem; line-height:1; }
.bp-card p { font-size:.92rem; font-weight:300; color:var(--dim); line-height:1.7; }
.bp-card--problem { border-left:3px solid var(--green); }

/* timeline chip (shared pattern) */
.sb-timeline { margin-top:2.5rem; display:inline-flex; align-items:center; gap:.6rem; padding:.5rem 1rem; background:var(--gray); border:1px solid var(--muted); }
.sb-timeline-label { font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--green); }
.sb-timeline-value { font-size:.85rem; font-weight:400; color:var(--white); }

/* ── PROCESS ── */
.bp-process { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-top:2.5rem; border-top:1px solid var(--muted); padding-top:2.5rem; }
.bp-step-num { font-family:'Bebas Neue',sans-serif; font-size:.85rem; font-weight:600; letter-spacing:.3em; color:var(--green); margin-bottom:.8rem; }
.bp-step h3 { font-family:'Bebas Neue',sans-serif; font-size:1.6rem; color:var(--white); margin-bottom:.6rem; letter-spacing:.03em; line-height:1; }
.bp-step p { font-size:.9rem; font-weight:300; color:var(--dim); line-height:1.7; }

/* ── PROOF ── */
.bp-proof .bp-metric { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.6rem,5vw,3.6rem); color:var(--neon); line-height:1; margin-bottom:.6rem; }
.bp-proof p { font-size:.92rem; font-weight:300; color:var(--dim); line-height:1.7; }
.bp-proof cite { display:block; margin-top:.9rem; font-style:italic; font-size:.85rem; color:var(--neon); }

/* ── FAQ (native <details> — works without JS) ── */
.bp-faq { max-width:900px; margin:2.5rem auto 0; }
.faq-item { border-bottom:1px solid var(--muted); }
.faq-item:first-child { border-top:1px solid var(--muted); }
.faq-q { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.5rem 0; cursor:pointer; }
.faq-q::-webkit-details-marker { display:none; }
.faq-q h3 { margin:0; font-family:'Montserrat',sans-serif; font-size:1.05rem; font-weight:500; color:var(--white); line-height:1.4; transition:color .3s; }
/* Icon: '+' when closed, '×' when open. Glyph swap (not rotate) — a <summary>
   pseudo-element ignores `transform` in Chromium, but honours background-image. */
.faq-q::after { content:""; flex-shrink:0; width:18px; height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%237BAE6E' stroke-width='2'%3E%3Cline x1='9' y1='1' x2='9' y2='17'/%3E%3Cline x1='1' y1='9' x2='17' y2='9'/%3E%3C/svg%3E") no-repeat center; }
.faq-q:hover h3 { color:var(--neon); }
.faq-item[open] .faq-q h3 { color:var(--neon); }
.faq-item[open] .faq-q::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%237BAE6E' stroke-width='2'%3E%3Cline x1='4' y1='4' x2='14' y2='14'/%3E%3Cline x1='14' y1='4' x2='4' y2='14'/%3E%3C/svg%3E"); }
.faq-a { padding:0 0 1.6rem; color:var(--dim); font-weight:300; font-size:1rem; line-height:1.9; max-width:760px; }

/* ── FINAL CTA + FORM (reused from /contact) ── */
.contact-page { padding:6rem 4rem; border-top:1px solid var(--muted); }
.contact-wrap { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1.3fr; gap:5rem; align-items:start; }
.contact-left .tag { font-size:.85rem; font-weight:500; letter-spacing:.35em; text-transform:uppercase; color:var(--green); margin-bottom:1.2rem; }
.contact-left h2 { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.5rem,5vw,4rem); line-height:.88; color:var(--white); margin-bottom:1.5rem; }
.contact-left h2 em { color:var(--neon); font-style:normal; }
.contact-left .lead { font-size:1.1rem; font-weight:300; color:var(--dim); line-height:1.9; margin-bottom:2.5rem; }
.no-bs-list { display:flex; flex-direction:column; gap:.8rem; }
.no-bs-title { font-family:'Bebas Neue',sans-serif; font-size:1.4rem; color:var(--white); margin-bottom:.5rem; letter-spacing:.04em; }
.no-bs-item { display:flex; align-items:flex-start; gap:.8rem; font-size:.95rem; font-weight:300; color:var(--white); line-height:1.6; }
.no-bs-check { color:var(--green); font-weight:600; flex-shrink:0; }

.contact-form { background:var(--gray); border:1px solid var(--muted); padding:3rem; }
.form-tag { font-size:.85rem; font-weight:500; letter-spacing:.35em; text-transform:uppercase; color:var(--green); margin-bottom:.8rem; }
.form-h { font-family:'Bebas Neue',sans-serif; font-size:clamp(2rem,3.5vw,3rem); line-height:.9; color:var(--white); margin-bottom:.6rem; }
.form-h em { color:var(--neon); font-style:normal; }
.form-sub { font-size:.95rem; font-weight:300; color:var(--dim); margin-bottom:2.5rem; line-height:1.7; }
.form-group { margin-bottom:1.2rem; }
.form-label { display:block; font-size:.75rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--green); margin-bottom:.5rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  background:var(--black);
  border:1px solid var(--muted);
  color:var(--white);
  font-family:'Montserrat',sans-serif;
  font-size:1rem;
  font-weight:300;
  padding:1rem 1.2rem;
  outline:none;
  transition:border-color .3s, background .3s;
  -webkit-appearance:none;
  width:100%;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color:var(--green); background:var(--field-focus-bg); }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color:var(--dim); font-weight:300; }
.form-status { font-size:.9rem; font-weight:400; line-height:1.6; margin-bottom:1rem; min-height:1.2em; }
.form-status:empty { margin-bottom:0; }
.form-status--error { color:var(--danger); }
.form-status--ok { color:var(--neon); }
.contact-form input[aria-invalid="true"],
.contact-form select[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] { border-color:var(--danger); }
.contact-form textarea { resize:vertical; min-height:130px; }
.contact-form select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237BAE6E' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1.2rem center;
  padding-right:3rem;
  cursor:pointer;
}
.contact-form select option { background:var(--gray); color:var(--white); }
.form-checkbox { display:flex; align-items:flex-start; gap:.8rem; margin:1.5rem 0 2rem; }
.form-checkbox input[type="checkbox"] { width:18px; height:18px; margin-top:.15rem; flex-shrink:0; accent-color:var(--green); cursor:pointer; }
.form-checkbox label { font-size:.85rem; font-weight:300; color:var(--dim); line-height:1.7; cursor:pointer; }
.form-checkbox label a { color:var(--green); text-decoration:none; }
.form-checkbox label a:hover { color:var(--neon); }
.btn-send {
  padding:1.2rem 2rem;
  background:var(--neon);
  color:var(--black);
  border:none;
  font-family:'Bebas Neue',sans-serif;
  font-size:1.5rem;
  letter-spacing:.12em;
  cursor:pointer;
  transition:background .3s,transform .2s;
  width:100%;
}
.btn-send:hover { background:var(--green); transform:translateY(-2px); }
.btn-send:disabled { opacity:.6; cursor:not-allowed; }

/* ── CTA button ── */
.cta-btn { display:inline-block; padding:1rem 2.5rem; background:var(--neon); color:var(--black); border:none; font-family:'Bebas Neue',sans-serif; font-size:1.3rem; letter-spacing:.12em; text-decoration:none; transition:background .3s,transform .2s; }
.cta-btn:hover { background:var(--green); transform:translateY(-2px); }

/* ── FOCUS VISIBLE (a11y) ── */
a:focus-visible, button:focus-visible, .btn-send:focus-visible, .cta-btn:focus-visible,
.faq-q:focus-visible,
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible,
.form-checkbox input:focus-visible { outline:2px solid var(--neon); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  .btn-send:hover, .cta-btn:hover, .bp-card:hover { transform:none; }
}

@media(max-width:900px){
  nav { padding:1rem 1.5rem; } nav ul { display:none; }
  .landing-hero { padding:8rem 1.5rem 3rem; }
  .bp-section { padding:3.5rem 1.5rem; }
  .bp-grid-2, .bp-grid-3 { grid-template-columns:1fr; gap:1.5rem; }
  .bp-process { grid-template-columns:1fr; border-top:none; padding-top:0; padding-left:1.5rem; border-left:1px solid var(--muted); gap:2rem; }
  .contact-page { padding:3.5rem 1.5rem; }
  .contact-wrap { grid-template-columns:1fr; gap:2.5rem; }
  .contact-form { padding:2rem 1.5rem; }
  .form-row { grid-template-columns:1fr; }
}