/* =====================================================================
   css/local.css — Landing local "Diseño web en Sant Celoni"
   Depende de css/main.css (variables, nav, footer, marquee, botones).
   Reutilizable para las páginas por zona (Granollers, etc.).
   Regla de rendimiento: solo se animan transform y opacity.
   ===================================================================== */

html { scroll-padding-top: 84px; }

/* ---------- Navegación (piezas que main.css no define) ---------- */
.nav-right { display:flex; align-items:center; gap:1.25rem; }
.nav-login { display:flex; color:var(--text-muted); transition:color .2s; }
.nav-login:hover { color:var(--white); }
.nav-login svg { width:22px; height:22px; }
.logo-svg svg { display:block; }

.skip-link { position:absolute; left:-9999px; top:0; background:var(--blue); color:var(--white); padding:.6rem 1rem; z-index:1000; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Desplegables: "Zonas" y selector de idioma comparten componente */
[data-dd] { position:relative; }
[data-dd].open .chev { transform:rotate(180deg); }

.lang-btn {
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text);
  font-family:var(--font); font-weight:800; font-size:.8rem; letter-spacing:.06em;
  padding:.4rem .7rem; border-radius:999px; transition:border-color .2s, background .2s;
}
.lang-btn:hover, .lang.open .lang-btn { border-color:var(--border-glow); background:rgba(0,80,255,.1); }
.lang-btn .globe { width:16px; height:16px; }

.dd-menu {
  position:absolute; top:calc(100% + 12px); min-width:230px; list-style:none; z-index:250;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:.45rem;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s, transform .18s, visibility .18s;
}
.dd-menu::before { content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.lang .dd-menu { right:0; min-width:200px; }
[data-dd].open > .dd-menu { opacity:1; visibility:visible; transform:none; }
@media (hover:hover) { [data-dd]:hover > .dd-menu { opacity:1; visibility:visible; transform:none; } }
.nav-right .dd-menu a, .dd-menu .soon {
  display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-radius:8px;
  font-size:.88rem; font-weight:600; color:var(--text); text-decoration:none; letter-spacing:0;
}
.nav-right .dd-menu a:hover { background:rgba(255,255,255,.06); color:var(--white); }
.nav-right .dd-menu a[aria-current] { color:var(--blue-light); }
.dd-menu .soon { opacity:.55; cursor:default; }
.dd-menu .soon em { font-style:normal; font-size:.7rem; margin-left:auto; border:1px solid var(--border); border-radius:999px; padding:.05rem .5rem; }
.dd-menu b { font-size:.72rem; letter-spacing:.08em; color:var(--cyan); min-width:1.6rem; }



/* Overlay y botón cerrar del menú móvil (en el resto del sitio los define hero.css, que aquí no se carga) */
.mobile-menu-overlay { display:none; position:fixed; inset:68px 0 0 0; background:rgba(0,0,0,.55); z-index:198; }
.mobile-menu-overlay.open { display:block; }
.mobile-menu-close { align-self:flex-end; background:none; border:0; color:var(--text); font-size:1.25rem; line-height:1; cursor:pointer; padding:.25rem .5rem; }

/* Barra de progreso de lectura: solo CSS, solo donde hay scroll-driven animations */
.prog { display:none; }
@supports (animation-timeline: scroll()) {
  .prog { display:block; position:fixed; top:0; left:0; right:0; height:3px; z-index:300; transform-origin:0 50%; transform:scaleX(0);
    background:linear-gradient(90deg, var(--orange), var(--violet), var(--cyan));
    animation:progGrow linear both; animation-timeline:scroll(root block); }
  @keyframes progGrow { to { transform:scaleX(1); } }
}

/* ---------- HERO ---------- */
.local-hero { position:relative; overflow:hidden; padding:calc(68px + 4rem) 0 4.5rem;
  background:
    radial-gradient(ellipse 40% 40% at 12% 90%, rgba(139,92,246,.12), transparent 70%),
    var(--bg-deep); }
.orb { position:absolute; border-radius:50%; pointer-events:none; will-change:transform; }
.orb-1 { width:560px; height:560px; right:-140px; top:20px; background:radial-gradient(circle, rgba(0,80,255,.30), transparent 65%); }
.orb-2 { width:380px; height:380px; left:-120px; bottom:-120px; background:radial-gradient(circle, rgba(6,214,224,.16), transparent 65%); }
.hero-grid { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }

.breadcrumb { font-size:.8rem; color:var(--text-muted); margin-bottom:1.5rem; }
.breadcrumb a { color:var(--text-muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--white); }
.breadcrumb span[aria-current] { color:var(--text); }
.hero-badge-local { display:inline-flex; align-items:center; gap:.55rem; border:1px solid var(--border-glow); background:rgba(0,80,255,.08);
  color:var(--blue-light); font-weight:700; font-size:.82rem; padding:.4rem .95rem; border-radius:999px; margin-bottom:1.4rem; }
.hero-badge-local i { width:7px; height:7px; border-radius:50%; background:var(--cyan); display:block; }
.local-hero h1 { font-size:clamp(2.2rem,5.6vw,4rem); font-weight:900; line-height:1.04; letter-spacing:-0.03em; color:var(--white); max-width:15ch; margin-bottom:1.25rem; }
.local-hero .lead { font-size:1.12rem; color:var(--text-muted); max-width:56ch; line-height:1.7; margin-bottom:2rem; }
.hero-actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:2.25rem; }
.hero-facts { display:flex; flex-wrap:wrap; gap:.6rem 1.75rem; list-style:none; color:var(--text); font-size:.92rem; font-weight:600; }
.hero-facts li::before { content:"✓"; color:var(--cyan); margin-right:.5rem; font-weight:800; }

/* --- Pieza visual del hero: una búsqueda en Google donde tu web sube al puesto 1 (ilustrativa) --- */
.serp { --h:92px; background:#0d1117; border:1px solid #30363d; border-radius:14px; overflow:hidden; max-width:500px; width:100%; margin-left:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 40px rgba(0,80,255,.12); }
.serp-bar { background:#161b22; padding:.7rem 1rem; display:flex; align-items:center; gap:.9rem; border-bottom:1px solid #30363d; }
.serp-bar .dots { display:flex; gap:6px; }
.serp-bar .dots i { width:11px; height:11px; border-radius:50%; display:block; }
.serp-bar .dots i:nth-child(1){background:#ff5f56} .serp-bar .dots i:nth-child(2){background:#ffbd2e} .serp-bar .dots i:nth-child(3){background:#27c93f}
.serp-url { flex:1; background:#0d1117; border-radius:999px; color:#8b949e; font-size:.75rem; padding:.25rem .8rem; }
.serp-search { margin:1rem 1rem .6rem; border:1px solid #30363d; border-radius:999px; padding:.55rem 1rem; display:flex; align-items:center; gap:.65rem; color:#c9d1d9; font-size:.95rem; font-weight:500; }
.serp-search svg { width:16px; height:16px; flex:none; color:#8b949e; }
.serp-rows { position:relative; height:calc(var(--h) * 4); margin:0 1rem 0; }
.serp-row { position:absolute; top:0; left:0; right:0; height:calc(var(--h) - 10px); padding:.55rem .8rem; border-radius:10px; border:1px solid transparent; overflow:hidden; }
.serp-row .u { display:block; font-size:.72rem; color:#8b949e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.serp-row b { display:block; font-size:.95rem; font-weight:700; color:#8ab4f8; line-height:1.3; margin:.15rem 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.serp-row small { display:block; font-size:.76rem; color:#8b949e; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.r-us { background:rgba(0,80,255,.12); }
.r-us b { color:#fff; }
.r-us::after { content:""; position:absolute; inset:-1px; border-radius:10px; border:1px solid var(--cyan); box-shadow:0 0 22px rgba(6,214,224,.35); }
.r-us .badge { position:absolute; right:.6rem; top:.5rem; font-size:.66rem; font-weight:800; letter-spacing:.06em; background:var(--cyan); color:#05252a; padding:.1rem .5rem; border-radius:999px; }
/* Estado final (también el de prefers-reduced-motion): tu web en 1.ª posición */
.r-us { transform:translateY(0); }
.r-a  { transform:translateY(var(--h)); }
.r-b  { transform:translateY(calc(var(--h) * 2)); }
.r-c  { transform:translateY(calc(var(--h) * 3)); }
.serp-note { font-size:.7rem; color:#6e7681; padding:.4rem 1rem .8rem; }

@media (prefers-reduced-motion:no-preference) {
  .orb-1 { animation:floatA 18s ease-in-out infinite alternate; }
  .orb-2 { animation:floatB 22s ease-in-out infinite alternate; }
  @keyframes floatA { to { transform:translate3d(-70px,50px,0) scale(1.1); } }
  @keyframes floatB { to { transform:translate3d(90px,-40px,0) scale(1.15); } }

  /* Ciclo de 10 s: escribe la búsqueda → aparecen resultados → tu web sube del 4.º al 1.º → resalta → reinicia */
  .serp-q { display:inline-block; animation:serpType 10s steps(22,end) infinite; }
  @keyframes serpType { 0%{clip-path:inset(0 100% 0 0)} 15%,94%{clip-path:inset(0 0 0 0)} 100%{clip-path:inset(0 100% 0 0)} }
  .serp-rows { animation:serpFade 10s infinite; }
  @keyframes serpFade { 0%,16%{opacity:0} 22%,92%{opacity:1} 100%{opacity:0} }
  .r-us { animation:serpUp 10s cubic-bezier(.6,0,.2,1) infinite; }
  .r-a  { animation:serpD1 10s cubic-bezier(.6,0,.2,1) infinite; }
  .r-b  { animation:serpD2 10s cubic-bezier(.6,0,.2,1) infinite; }
  .r-c  { animation:serpD3 10s cubic-bezier(.6,0,.2,1) infinite; }
  @keyframes serpUp { 0%,38%{transform:translateY(calc(var(--h)*3))} 54%,100%{transform:translateY(0)} }
  @keyframes serpD1 { 0%,38%{transform:translateY(0)} 54%,100%{transform:translateY(var(--h))} }
  @keyframes serpD2 { 0%,38%{transform:translateY(var(--h))} 54%,100%{transform:translateY(calc(var(--h)*2))} }
  @keyframes serpD3 { 0%,38%{transform:translateY(calc(var(--h)*2))} 54%,100%{transform:translateY(calc(var(--h)*3))} }
  .r-us::after, .r-us .badge { animation:serpGlow 10s infinite; }
  @keyframes serpGlow { 0%,52%{opacity:0} 60%,92%{opacity:1} 100%{opacity:0} }
}

/* ---------- Marquee (usa .marquee-wrap/.marquee-track de main.css) ---------- */
@media (prefers-reduced-motion:reduce) { .marquee-track { animation:none; } }

/* ---------- Secciones y revelado al hacer scroll ---------- */
.alt-bg { background:linear-gradient(180deg, rgba(19,31,66,.55), rgba(19,31,66,.2)); }
.prose { max-width:68ch; color:var(--text-muted); line-height:1.8; }
.prose p + p { margin-top:1rem; }
.prose strong { color:var(--text); }

.js .rv { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; transition-delay:calc(var(--i,0) * 90ms); }
.js .rv.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .js .rv { opacity:1; transform:none; transition:none; } }

/* ---------- Tarjetas ---------- */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.5rem; }
.card { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.75rem; overflow:hidden; transition:transform .25s, border-color .25s; }
.card::before { content:""; position:absolute; left:0; top:0; right:0; height:3px; background:linear-gradient(90deg, var(--orange), var(--violet), var(--cyan)); opacity:.85; }
.card:hover { transform:translateY(-4px); border-color:var(--border-glow); }
.card h3 { color:var(--white); font-size:1.15rem; font-weight:800; margin-bottom:.6rem; letter-spacing:-.01em; }
.card p { color:var(--text-muted); font-size:.93rem; line-height:1.65; }

/* Qué incluye */
.inc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.5rem; list-style:none; }
.inc { background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:12px; padding:1.3rem; }
.inc::before { content:"✓"; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:rgba(6,214,224,.12); color:var(--cyan); font-weight:900; font-size:.85rem; margin-bottom:.8rem; }
.inc h3 { color:var(--white); font-size:1rem; font-weight:800; margin-bottom:.35rem; }
.inc p { color:var(--text-muted); font-size:.86rem; line-height:1.55; }

/* Problemas */
.problems { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.5rem; }
.problem { border-left:3px solid var(--orange); padding:.2rem 0 .2rem 1.2rem; }
.problem h3 { color:var(--white); font-size:1.08rem; font-weight:800; margin-bottom:.45rem; }
.problem p { color:var(--text-muted); font-size:.92rem; line-height:1.65; }
.problem p strong { color:var(--cyan); font-weight:700; }
.queries-title { margin-top:3rem; color:var(--text); font-weight:800; font-size:1rem; }
.sectors { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; list-style:none; }
.sectors li { border:1px solid var(--border); border-radius:999px; padding:.5rem 1.05rem; font-size:.9rem; font-weight:600; color:var(--text); background:rgba(255,255,255,.02); }
.sectors.q li::before { content:"⌕ "; color:var(--blue-light); }

/* Comparativa */
.tbl-wrap { overflow-x:auto; margin-top:2.25rem; border:1px solid var(--border); border-radius:var(--radius); }
.cmp { width:100%; border-collapse:collapse; min-width:620px; font-size:.92rem; }
.cmp th, .cmp td { text-align:left; padding:1rem 1.25rem; border-bottom:1px solid var(--border); vertical-align:top; line-height:1.55; }
.cmp thead th { color:var(--white); font-weight:800; background:rgba(255,255,255,.03); }
.cmp thead th.us { color:var(--cyan); }
.cmp tbody th { color:var(--text); font-weight:700; width:22%; }
.cmp td { color:var(--text-muted); }
.cmp td.us { color:var(--text); background:rgba(0,80,255,.07); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom:0; }

/* Proceso (sí es una secuencia) */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; margin-top:2.5rem; list-style:none; counter-reset:step; }
.steps li { position:relative; counter-increment:step; border-top:2px solid rgba(255,255,255,.1); padding-top:1.1rem; }
.steps li::after { content:""; position:absolute; left:0; top:-2px; height:2px; width:100%; background:var(--blue); transform-origin:left; transition:transform .9s ease; transition-delay:calc(var(--i,0) * 160ms); }
.js .steps li::after { transform:scaleX(0); }
.js .steps li.in::after { transform:scaleX(1); }
@media (prefers-reduced-motion:reduce) { .js .steps li::after { transform:none; transition:none; } }
.steps li::before { content:counter(step) "."; display:block; color:var(--blue-light); font-weight:900; font-size:1.5rem; margin-bottom:.35rem; }
.steps h3 { color:var(--white); font-size:1.05rem; font-weight:800; margin-bottom:.4rem; }
.steps p { color:var(--text-muted); font-size:.9rem; line-height:1.6; }

/* ---------- Marcadores de imagen ---------- */
.slot { position:relative; overflow:hidden; aspect-ratio:var(--ar,16/10); border-radius:var(--radius); border:1px dashed var(--border-glow);
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 12px, rgba(255,255,255,.055) 12px 24px), var(--surface); }
.slot::before { content:attr(data-label); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:1rem;
  font-size:.78rem; font-weight:700; color:var(--text-muted); line-height:1.5; white-space:pre-line; }
.slot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.5rem; }
.work figcaption { margin-top:.8rem; }
.work figcaption h3 { color:var(--white); font-size:1rem; font-weight:800; }
.work figcaption p { color:var(--text-muted); font-size:.86rem; }
.todo { border:1px dashed var(--orange); color:var(--orange) !important; border-radius:6px; padding:.1rem .45rem; display:inline-block; }
.banner { padding:0 0 90px; }

/* ---------- Zonas + mapa animado ---------- */
.zonas-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:2.5rem; align-items:center; margin-top:2rem; }
.areas { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; list-style:none; }
.areas li { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.85rem 1.1rem; color:var(--text); font-weight:600; font-size:.93rem; }
.areas li small { display:block; color:var(--text-muted); font-weight:400; font-size:.78rem; margin-top:.15rem; }
.map { background:#0d1117; border:1px solid #30363d; border-radius:var(--radius); padding:1rem; }
.map svg { display:block; width:100%; height:auto; }
.map figcaption { font-size:.72rem; color:#6e7681; margin-top:.4rem; text-align:center; }
.map .route { fill:none; stroke:rgba(59,130,255,.55); stroke-width:1.6; stroke-dasharray:1; stroke-dashoffset:0; }
.js .map .route { stroke-dashoffset:1; }
.js .map.in .route { animation:draw 1.3s ease forwards; animation-delay:calc(var(--i,0) * 120ms); }
@keyframes draw { to { stroke-dashoffset:0; } }
.map .node { fill:var(--blue-light); }
.map .node.hub { fill:var(--cyan); }
.map .node.bcn { fill:var(--violet); }
.map text { fill:var(--text); font-family:var(--font); font-weight:700; font-size:14px; }
.map text.sm { fill:#6e7681; font-weight:600; font-size:11px; }
.map .mont { fill:rgba(139,92,246,.18); }
.map .ring { fill:none; stroke:var(--cyan); stroke-width:1.5; transform-box:fill-box; transform-origin:center; opacity:0; }
@media (prefers-reduced-motion:no-preference) {
  .map .ring { animation:ring 3.2s ease-out infinite; }
  .map .ring.r2 { animation-delay:1.6s; }
  @keyframes ring { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(5);opacity:0} }
}
@media (prefers-reduced-motion:reduce) { .js .map .route { stroke-dashoffset:0; animation:none; } .map .ring.r1 { opacity:.35; } }

/* ---------- Por qué + foto ---------- */
.why-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:center; }
.why-grid figure { max-width:360px; margin-left:auto; width:100%; }
.why-grid figcaption { margin-top:.7rem; font-size:.84rem; color:var(--text-muted); }

/* ---------- FAQ ---------- */
.faq-list { max-width:820px; margin-top:2.25rem; display:flex; flex-direction:column; gap:.9rem; }
.faq-list details { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.4rem; }
.faq-list details[open] { border-color:rgba(139,92,246,.4); }
.faq-list summary { cursor:pointer; list-style:none; font-weight:800; color:var(--white); font-size:1.02rem; padding-right:2rem; position:relative; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); color:var(--blue-light); font-size:1.4rem; }
.faq-list details[open] summary::after { content:"−"; color:var(--orange); }
.faq-list details p { color:var(--text-muted); font-size:.94rem; line-height:1.7; margin-top:.75rem; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.05); }

/* ---------- CTA final ---------- */
.cta-local { text-align:center; padding:90px 0; background:radial-gradient(ellipse 55% 70% at 50% 100%, rgba(0,80,255,.2), transparent 70%); }
.cta-local h2 { font-size:clamp(1.8rem,3.6vw,2.7rem); font-weight:900; color:var(--white); letter-spacing:-.025em; line-height:1.1; margin-bottom:1rem; }
.cta-local p { color:var(--text-muted); max-width:52ch; margin:0 auto 2rem; line-height:1.7; }
.cta-local .hero-actions { justify-content:center; margin-bottom:1.25rem; }
.cta-meta { font-size:.88rem; color:var(--text-muted); }
.cta-meta a { color:var(--text); text-decoration:none; font-weight:600; }
.cta-meta a:hover { color:var(--white); }

/* Footer: main.css usa h5; aquí h2 semántico con el mismo aspecto */
.footer-col h2 { font-size:.72rem; font-weight:900; color:var(--white); letter-spacing:.12em; text-transform:uppercase; margin-bottom:1rem; }
.footer-col a[aria-current] { color:var(--blue-light); }

/* WhatsApp con SVG inline (sin petición externa a wikimedia.org) */
.wsp-btn svg { width:34px; height:34px; display:block; }

/* ---------- Responsive ---------- */
@media (max-width:1000px) {
  .inc-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .hero-grid, .zonas-grid, .why-grid { grid-template-columns:1fr; }
  .serp { margin:0 auto; }
  .cards, .problems, .work-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr 1fr; }
  .section-pad { padding:64px 0; }
  .nav-right { gap:.75rem; }
  .why-grid figure { margin:0 auto; }
  .banner { padding-bottom:64px; }
}
@media (max-width:560px) {
  .steps, .inc-grid, .areas { grid-template-columns:1fr; }
  .local-hero { padding-top:calc(68px + 2.5rem); }
  .wsp-btn { bottom:18px; right:18px; }
  .orb-1 { width:380px; height:380px; }
}
@media (max-width:420px) {
  .nav-login { display:none; }
  .logo-wordmark { font-size:1.05rem; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }