/* =========================================================
   SINCROVISUAL — estilos del sitio público
   Paleta: blanco + tonos grises, footer gris oscuro
   ========================================================= */

:root{
  --bg: #ffffff;
  --bg-alt: #f4f4f4;
  --bg-card: #ffffff;
  --bg-dark: #212121;
  --bg-dark-alt: #2c2c2c;
  --border: rgba(20,20,20,0.1);
  --border-dark: rgba(255,255,255,0.12);
  --text: #000000;
  --text-dim: #000000;
  --text-on-dark: #f1f1f0;
  --text-dim-on-dark: #b8b8b6;
  --accent: #9b9b9a;
  --accent-2: #707070;
  --accent-rgb: 155,155,154;
  --accent-2-rgb: 112,112,112;
  --cta: #595958;
  --cta-dark: #3f3f3e;
  --radius: 16px;
  --max: 1180px;
  font-size: 16px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
h1,h2,h3,h4{
  font-family: 'Sora', sans-serif;
  line-height: 1.2;
  margin: 0 0 .6em;
  color: var(--text);
}
p{ margin: 0 0 1em; color: var(--text-dim); }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
.container{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.text-gradient{
  background: linear-gradient(90deg, var(--accent), var(--cta-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tag{
  display:inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .8em;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cta);
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid rgba(var(--accent-rgb),0.25);
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  margin-bottom: 1.2em;
}
.pulse-dot{
  width: 8px; height: 8px; border-radius:50%; background: var(--accent);
  position: relative; flex-shrink:0;
}
.pulse-dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  background: var(--accent); opacity:.5;
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{ transform: scale(0.6); opacity:.6; }
  100%{ transform: scale(2.2); opacity:0; }
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-cta{
  background: linear-gradient(90deg, var(--cta), var(--cta-dark));
  color:#fff;
  box-shadow: 0 8px 24px rgba(15,128,61,0.28);
}
.btn-cta:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,128,61,0.4); }
.btn-outline{
  border-color: var(--border);
  color: var(--text);
  background: rgba(var(--accent-rgb),0.04);
}
.btn-outline:hover{ border-color: var(--accent); color: var(--cta); transform: translateY(-2px); }
.btn-lg{ padding: 15px 30px; font-size: 1rem; }

/* Header */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 92px;
}
.logo{
  font-family:'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: .02em;
  color: var(--text);
  display:inline-flex;
  align-items:center;
}
.logo span{ color: var(--accent); }
.logo img{ height: 56px; display:block; width:auto; }
.site-footer .logo img{ height: 56px; }
.main-nav{ display:flex; gap: 32px; }
.main-nav a{
  color: var(--text-dim);
  font-weight: 500;
  font-size: .95rem;
  position: relative;
  transition: color .2s ease;
}
.main-nav a:hover, .main-nav a.active{ color: var(--text); }
.main-nav a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-10px; height:2px;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
}
.nav-cta{ font-size: .85rem; padding: 10px 20px; }
.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding: 6px; }
.menu-toggle span{ width: 24px; height:2px; background: var(--text); border-radius: 2px; }

/* Hero */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:center;
  padding-top: 92px;
  overflow:hidden;
  background: var(--bg);
  isolation: isolate;
}
/* Toque morado: resplandor suave desde el suelo del escenario */
.hero::before{
  content:''; position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 80% 35% at 50% 100%, rgba(160,120,220,0.13) 0%, transparent 70%),
    radial-gradient(ellipse 40% 20% at 20% 100%, rgba(150,110,210,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 40% 20% at 80% 100%, rgba(150,110,210,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 70% 30% at 50% 0%,  rgba(160,120,220,0.22) 0%, transparent 70%);
}
.hero-bg-pattern{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: radial-gradient(rgba(var(--accent-rgb),0.18) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 75%);
}
.hero-beams{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb),0.1), transparent 60%);
  pointer-events:none;
}
.hero-grid{
  position: relative; display:grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items:center;
  padding: 80px 24px 70px;
}
.hero-content{ max-width: 620px; }
.hero h1{ font-size: clamp(2.4rem, 5.2vw, 3.8rem); font-weight: 800; }
.hero-sub{ font-size: 1.1rem; max-width: 540px; }
.hero-actions{ display:flex; gap: 16px; flex-wrap: wrap; margin-top: 2em; }
.hero-trust{ display:flex; gap: 24px; flex-wrap:wrap; margin-top: 2.2em; }
.hero-trust span{ display:flex; align-items:center; gap:.5em; font-size:.88rem; color: var(--text-dim); font-weight:500; }
.hero-trust i{ color: var(--accent); }

/* Hero visual */
.hero-visual{ position:relative; height: 420px; display:flex; align-items:center; justify-content:center; }
.hero-visual-card{
  width: 380px; height: 320px; border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 30px 60px -15px rgba(16,32,22,0.35);
  transform: rotate(-3deg);
  position: relative;
  border: 5px solid #fff;
}
.hero-visual-card img{
  width: 100%; height: 100%; object-fit: cover; display:block;
}
.hero-visual-card::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(160deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent-2-rgb),0.22));
  mix-blend-mode: multiply;
}
.hero-floating-card{
  position:absolute; background:#fff; border:1px solid var(--border); border-radius: 14px;
  padding: 12px 16px; display:flex; align-items:center; gap:.6em;
  box-shadow: 0 16px 32px -10px rgba(16,32,22,0.18);
  font-size: .85rem; font-weight:600; color: var(--text);
  animation: bob 5s ease-in-out infinite;
}
.hero-floating-card i{ color: var(--accent); font-size: 1.1rem; }
.hero-floating-card strong{ font-family:'Sora',sans-serif; font-size: 1.3rem; color: var(--accent); }
.card-stat-1{ top: 6%; left: -6%; animation-delay: 0s; }
.card-stat-2{ bottom: 10%; left: -2%; animation-delay: -1.6s; }
.card-stat-3{ top: 42%; right: -10%; animation-delay: -3.2s; }
@keyframes bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}

.scroll-down{
  position:absolute; bottom: 36px; left:50%; transform: translateX(-50%);
}
.scroll-down span{
  display:block; width: 1px; height: 50px;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse{ 0%{ opacity:0; } 50%{ opacity:1; } 100%{ opacity:0; } }

/* Strip stats */
.strip{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background: var(--bg-alt); }
.strip-inner{
  display:grid; grid-template-columns: repeat(4,1fr);
  padding: 36px 24px; text-align:center; gap: 20px;
}
.strip-item strong{ display:block; font-family:'Sora',sans-serif; font-size: 1.8rem; color: var(--accent); }
.strip-item span{ font-size: .85rem; color: var(--text-dim); }

/* Sections */
.section{ padding: 100px 0; }
.section-head{ max-width: 640px; margin: 0 auto 56px; text-align:center; }
.section-head h2{ font-size: clamp(1.8rem, 3.5vw, 2.4rem); }

/* Portfolio teaser (inicio) — bloque a sangre completa con fondo gris para
   diferenciarlo de los servicios (fondo blanco) que lo rodean */
.portfolio-teaser{
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Sobre Sincrovisual (inicio) — bloque oscuro a sangre completa para marcar
   un cambio de ritmo antes del CTA final */
.about-preview{
  background: linear-gradient(135deg, var(--bg-dark), var(--bg-dark-alt));
}
.about-preview .about-text .tag{ color: var(--accent); }
.about-preview .about-text h2,
body.titulos-acento .about-preview .about-text h2{ color: var(--text-on-dark); }
.about-preview .about-text p{ color: var(--text-dim-on-dark); }
.about-preview .check-list li{ color: var(--text-on-dark); }
.about-preview .check-list i{ color: var(--accent); }
.about-preview .btn-outline{ border-color: var(--border-dark); color: var(--text-on-dark); background: rgba(255,255,255,0.06); }
.about-preview .btn-outline:hover{ border-color: var(--accent); color: var(--accent); }
.about-preview .media-frame{ border: 5px solid #fff; border-radius: 28px; }

/* PRUEBA: títulos de sección con color distinto al texto (solo en index.html
   por ahora, vía body.titulos-acento). Si gusta, se pasa a global. */
body.titulos-acento .section-head h2,
body.titulos-acento .about-text h2{
  color: var(--accent-2);
}

/* Cards */
.cards-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.card{
  background: var(--bg-card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: 0 4px 16px rgba(16,32,22,0.04);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover{ transform: translateY(-6px); border-color: rgba(var(--accent-rgb),0.4); box-shadow: 0 16px 32px rgba(16,32,22,0.1); }
.card-icon{
  width: 52px; height:52px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.14), rgba(var(--accent-2-rgb),0.14));
  color: var(--accent);
  font-size: 1.3rem;
  margin-bottom: 1.2em;
}
.card h3{ font-size: 1.15rem; }
.card p{ margin:0; font-size: .92rem; text-align: justify; }

/* About preview / grid */
.about-grid{ display:grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items:center; }
.about-text p{ text-align: justify; }
.about-media .media-frame{
  aspect-ratio: 1/1;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 50px -15px rgba(16,32,22,0.25);
}
.about-media .media-frame img{
  width: 100%; height: 100%; object-fit: cover; display:block;
}
.about-media .media-frame::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent-2-rgb),0.22));
  mix-blend-mode: multiply;
}
.check-list{ list-style:none; padding:0; margin: 1.2em 0; }
.check-list li{ display:flex; align-items:flex-start; gap:.6em; margin-bottom: .6em; color: var(--text); font-size:.95rem; }
.check-list i{ color: var(--accent); margin-top: .2em; }

/* CTA final (resto de páginas) — banda a sangre completa pegada tanto a la
   sección anterior como al pie (sin márgenes), en un gris más claro que el
   pie para que la transición entre ambos sea progresiva */
.cta-final{
  margin: 0;
  padding: 56px 0;
  background: linear-gradient(135deg, var(--accent-2), var(--bg-dark-alt));
  text-align: left;
}
.cta-final-inner{
  display:flex; align-items:center; justify-content:space-between; gap: 32px; flex-wrap: wrap;
}
.cta-final-text{ max-width: 580px; }
.cta-final h2{ color: var(--text-on-dark); font-size: clamp(1.5rem,2.6vw,1.9rem); margin-bottom:.3em; }
.cta-final p{ margin:0; color: var(--text-dim-on-dark); }
.cta-final .btn{ flex-shrink:0; }
/* El botón oscuro por defecto se pierde sobre este fondo gris: aquí lo
   ponemos claro para que destaque */
.cta-final .btn-cta{
  background: #fff;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.cta-final .btn-cta:hover{ background: #f1f1f1; }
@media (max-width: 700px){
  .cta-final-inner{ flex-direction: column; text-align:center; }
}

/* CTA final (solo inicio) — aquí va justo después del bloque oscuro "Sobre
   Sincrovisual", así que se mantiene como tarjeta flotante clara que monta
   un poco sobre el final de esa sección (relleno vacío, sin texto) */
body.titulos-acento .cta-final{
  margin: -90px 24px 100px; max-width: var(--max); margin-left:auto; margin-right:auto;
  padding: 70px 40px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 20px 50px -15px rgba(16,32,22,0.18);
  text-align:center;
  position: relative;
  z-index: 2;
}
body.titulos-acento .cta-final-inner{ display:block; }
body.titulos-acento .cta-final-text{ max-width: 480px; margin: 0 auto; }
body.titulos-acento .cta-final .btn-cta{
  background: linear-gradient(90deg, var(--cta), var(--cta-dark));
  color:#fff;
  box-shadow: 0 8px 24px rgba(15,128,61,0.28);
}
body.titulos-acento .cta-final .btn-cta:hover{ background: linear-gradient(90deg, var(--cta), var(--cta-dark)); }
body.titulos-acento .cta-final h2{ color: var(--text); font-size: clamp(1.8rem,3vw,2.2rem); }
body.titulos-acento .cta-final p{ max-width: 480px; margin: 0 auto 1.6em; color: var(--text-dim); }

/* Footer */
.site-footer{ background: var(--bg-dark); border-top: 1px solid var(--border-dark); padding: 60px 0 0; }
.site-footer .logo{ color: var(--text-on-dark); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 40px; padding-bottom: 40px; }
.footer-grid h4{ font-size: .95rem; margin-bottom: 1em; color: var(--text-on-dark); }
.footer-grid a, .footer-grid p{ display:block; font-size: .9rem; color: var(--text-dim-on-dark); margin-bottom: .7em; }
.footer-grid a:hover{ color: #fff; }
.footer-grid p a{ display:inline; margin-bottom:0; }
.footer-grid p i{ width: 16px; text-align:center; margin-right: 4px; }
.footer-bottom{
  border-top: 1px solid var(--border-dark);
  padding: 20px 24px;
  font-size: .82rem; color: var(--text-dim-on-dark);
  text-align:center;
}

/* Page hero (subpages) */
.page-hero{ padding: 186px 0 70px; text-align:center; background: var(--bg-alt); position:relative; overflow:hidden; isolation:isolate; }
.page-hero::before{
  content:''; position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,  rgba(160,120,220,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 15% 0%,  rgba(150,110,210,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 85% 0%,  rgba(150,110,210,0.12) 0%, transparent 65%);
}
.page-hero h1{ font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
.page-hero .hero-sub{ max-width: 600px; margin: 0 auto; }


/* ── Efecto humo ── */
.hero > .container,
.page-hero > .container { position:relative; z-index:1; }

.smoke-layer {
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
}

.smoke-puff {
  position:absolute;
  border-radius:50%;
  background: radial-gradient(ellipse at 45% 40%,
    rgba(160,120,220,0.52) 0%,
    rgba(160,120,220,0.20) 40%,
    rgba(160,120,220,0.06) 60%,
    transparent 75%);
  will-change: transform, opacity;
  width:  var(--w,240px);
  height: var(--h,210px);
  left:   var(--x,50%);
  bottom: var(--bot,3%);
  animation: smoke-rise var(--dur,10s) var(--delay,0s) infinite ease-out;
}

.page-hero .smoke-puff {
  background: radial-gradient(ellipse at 45% 40%,
    rgba(150,110,210,0.58) 0%,
    rgba(150,110,210,0.22) 40%,
    rgba(150,110,210,0.06) 60%,
    transparent 75%);
}

@keyframes smoke-rise {
  0%   { opacity:0;   transform:translate(0,0)                  scale(.82); }
  20%  { opacity:.55; }
  65%  { opacity:.25; }
  100% { opacity:0;   transform:translate(var(--dx,30px),-270px) scale(1.80); }
}

/* En page-hero el humo sube menos para quedarse en la franja baja */
.page-hero .smoke-puff {
  animation-name: smoke-rise-short;
}
@keyframes smoke-rise-short {
  0%   { opacity:0;   transform:translate(0,0)                  scale(.82); }
  22%  { opacity:.58; }
  65%  { opacity:.26; }
  100% { opacity:0;   transform:translate(var(--dx,20px),-110px) scale(1.50); }
}

/* Servicios — grid de tarjetas */
.services-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.service-card{
  position:relative; background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 34px 28px 28px; box-shadow: 0 4px 16px rgba(16,32,22,0.04);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column;
}
.service-card:hover{ transform: translateY(-6px); border-color: rgba(var(--accent-rgb),0.4); box-shadow: 0 16px 32px rgba(16,32,22,0.1); }
.service-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 1.3em; }
.service-card-icon{
  width: 56px; height:56px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.14), rgba(var(--accent-2-rgb),0.18));
  display:flex; align-items:center; justify-content:center;
  font-size: 1.4rem; color: var(--accent);
}
.service-card-num{ font-family:'Sora',sans-serif; font-weight:700; font-size: .85rem; color: var(--border); letter-spacing:.05em; }
.service-card h3{ font-size: 1.2rem; margin-bottom: .5em; }
.service-card p{ color: var(--text-dim); font-size: .92rem; margin-bottom: 1.2em; flex:1; text-align: justify; }
.service-tags{ display:flex; flex-wrap:wrap; gap: 8px; }
.service-tags span{
  font-size: .78rem; color: var(--text-dim); background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
}

/* Cómo trabajamos — proceso */
.process{ background: var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.process-list{ display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; position:relative; }
.process-list::before{
  content:''; position:absolute; top:26px; left:10%; right:10%; height:1px;
  background: var(--border); z-index:0;
}
.process-step{ text-align:center; position:relative; }
.process-num{
  width: 52px; height:52px; border-radius:50%; margin: 0 auto 18px;
  background: var(--bg-dark); color: var(--text-on-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:700; font-size: 1.1rem;
  position:relative; z-index:1;
}
.process-step h4{ font-size: 1rem; margin-bottom: .4em; }
.process-step p{ font-size: .88rem; color: var(--text-dim); margin:0; }

/* Values section reuse cards-grid */
.values .cards-grid{ grid-template-columns: repeat(3,1fr); }

/* Location */
.location-inner p{ margin-bottom:.5em; color: var(--text); }
.location-inner .btn{ margin-top: 1.2em; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap: 50px; }
.contact-form{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: 0 4px 20px rgba(16,32,22,0.05);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group{ margin-bottom: 20px; }
.form-group label{ display:block; font-size: .85rem; margin-bottom: 6px; color: var(--text-dim); }
.form-group input, .form-group select, .form-group textarea{
  width:100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color: var(--accent);
}
.form-note{ margin-top: 14px; font-size: .9rem; color: var(--accent); min-height: 1.2em; }
.form-note.error{ color: #b94a3d; }
.form-check{
  display:flex; align-items:flex-start; gap: 10px; margin-bottom: 24px;
}
.form-check input[type="checkbox"]{
  width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent);
}
.form-check label{
  margin:0; font-size: .85rem; color: var(--text-dim); line-height: 1.4;
}
.form-check label a{ color: var(--accent); font-weight:600; text-decoration: underline; }
.hp-field{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-info h3{ margin-bottom: .8em; }
.contact-info p{ color: var(--text); margin-bottom: .6em; }
.map-frame{
  margin-top: 1.4em; aspect-ratio: 4/3; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-2-rgb),0.16));
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size: 2.6rem; color: var(--accent);
  overflow: hidden;
}
.map-frame iframe{
  width: 100%; height: 100%; border: 0; display: block;
}

/* Portfolio teaser (inicio) */
.teaser-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap: 14px; margin-bottom: 2.4em; }
.teaser-item{
  display:block; overflow:hidden; border-radius: 14px; position:relative;
  box-shadow: 0 4px 16px rgba(16,32,22,0.08);
}
.teaser-item img{
  width:100%; aspect-ratio: 4/3; object-fit:cover; display:block;
  transition: transform .35s ease;
}
.teaser-item:hover img{ transform: scale(1.07); }
.teaser-cta{ text-align:center; }

/* Portfolio (galería completa) */
.gallery-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.gallery-item{
  overflow:hidden; border-radius: 14px; cursor:pointer;
  box-shadow: 0 4px 16px rgba(16,32,22,0.06);
  border: 1px solid var(--border);
}
.gallery-item img{
  width:100%; aspect-ratio: 4/3; object-fit:cover; display:block;
  transition: transform .35s ease;
}
.gallery-item:hover img{ transform: scale(1.07); }

/* Lightbox */
.lightbox-overlay{
  position:fixed; inset:0; background: rgba(8,20,12,0.92);
  display:none; align-items:center; justify-content:center; z-index: 300; padding: 30px;
}
.lightbox-overlay.open{ display:flex; }
.lightbox-overlay img{
  max-width: 88vw; max-height: 84vh; border-radius: 12px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  color:#fff; width: 46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size: 1.1rem; cursor:pointer;
  transition: background .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: rgba(255,255,255,0.28); }
.lightbox-close{ top: 24px; right: 24px; }
.lightbox-prev{ left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-counter{
  position:absolute; bottom: 20px; left:50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.75); font-size: .85rem;
}

/* Páginas legales */
.legal-content{ max-width: 760px; margin: 0 auto; }
.legal-content h2{ margin-top: 1.8em; font-size: 1.3rem; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ margin-top: 1.4em; font-size: 1.05rem; }
.legal-content p, .legal-content li{ color: var(--text-dim); font-size: .98rem; text-align: justify; }
.legal-content ul{ padding-left: 1.2em; }
.legal-content li{ margin-bottom: .5em; }
.legal-content a{ color: var(--accent); }
.cookie-table-wrap{ overflow-x: auto; margin: 1.2em 0 1.6em; -webkit-overflow-scrolling: touch; }
.cookie-table{ width:100%; min-width: 580px; border-collapse: collapse; font-size: .9rem; }
.cookie-table th, .cookie-table td{
  padding: 12px 14px; border: 1px solid var(--border); text-align: left; vertical-align: top;
}
.cookie-table th{
  background: var(--bg-alt); font-family:'Sora',sans-serif; font-weight:700;
  color: var(--text); white-space: nowrap;
}
.cookie-table td{ color: var(--text-dim); }
.cookie-table td:first-child{ font-weight:600; color: var(--text); white-space: nowrap; }

/* Cookie banner */
.btn-sm{ padding: 9px 18px; font-size: .85rem; }
.cookie-banner{
  position: fixed; left: 20px; right: 20px; bottom: -200px;
  max-width: 720px; margin: 0 auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(16,32,22,0.18);
  padding: 22px 26px; z-index: 400;
  transition: bottom .4s ease;
}
.cookie-banner.visible{ bottom: 20px; }
.cookie-banner-inner{ display:flex; align-items:center; justify-content:space-between; gap: 20px; flex-wrap:wrap; }
.cookie-banner p{ margin:0; font-size: .9rem; color: var(--text); flex:1; min-width:220px; }
.cookie-banner p a{ color: var(--accent); font-weight:700; text-decoration: underline; }
.cookie-actions{ display:flex; gap:10px; flex-shrink:0; }

.cookie-tab{
  position: fixed; right: 20px; bottom: 20px; z-index: 399;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--bg-dark); color: var(--text-on-dark);
  border: none; cursor: pointer; align-items:center; justify-content:center;
  font-size: 1.25rem; box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  display: none; transition: transform .2s ease;
}
.cookie-tab.visible{ display:flex; }
.cookie-tab:hover{ transform: scale(1.08); }

/* Responsive */
@media (max-width: 1000px){
  .hero-grid{ grid-template-columns: 1fr; padding-top: 60px; }
  .hero-content{ max-width: 640px; }
  .hero-visual{ height: 320px; }
  .hero-floating-card{ display:none; }
}
@media (max-width: 900px){
  .strip-inner{ grid-template-columns: repeat(2,1fr); }
  .cards-grid, .values .cards-grid{ grid-template-columns: 1fr 1fr; }
  .about-grid, .contact-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: 1fr 1fr; }
  .process-list{ grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .process-list::before{ display:none; }
  .teaser-grid{ grid-template-columns: repeat(3,1fr); }
  .gallery-grid{ grid-template-columns: repeat(3,1fr); }
  /* Sección "Sobre Sincrovisual" (inicio) se hace más alta en una columna:
     se quita el solape del CTA para no arriesgar tapar el texto */
  body.titulos-acento .cta-final{ margin-top: 40px; }
}
@media (max-width: 760px){
  .main-nav, .nav-cta{ display:none; }
  .menu-toggle{ display:flex; }
  .main-nav.open{
    display:flex; flex-direction:column; position:absolute; top:92px; left:0; right:0;
    background: var(--bg); padding: 24px; gap: 18px; border-bottom:1px solid var(--border);
  }
  .cards-grid, .values .cards-grid{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: 1fr; }
  .process-list{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  /* En móvil 100px de padding por sección deja huecos enormes entre
     bloques (p.ej. "Nuestra historia" -> "Lo que nos diferencia") */
  .section{ padding: 56px 0; }
  .hero-visual{ height: auto; padding: 4px 0 20px; }
  .hero-visual-card{
    width: 100%; max-width: 420px; height: auto; aspect-ratio: 4 / 3;
    transform: none; border-radius: 20px; border-width: 4px; margin: 0 auto;
  }
  /* El texto justificado en columnas estrechas deja huecos feos entre
     palabras: en móvil se desactiva y se alinea a la izquierda. */
  .card p, .about-text p, .service-card p, .legal-content p, .legal-content li{
    text-align: left;
  }
  /* Tabla de cookies: en pantallas estrechas el scroll horizontal se ve
     mal, así que cada fila se convierte en una tarjeta apilada con
     etiquetas (usando data-label de cada <td>) en vez de columnas. */
  .cookie-table-wrap{ overflow-x: visible; }
  .cookie-table{ min-width: 0; display:block; }
  .cookie-table thead{ display:none; }
  .cookie-table tbody{ display:block; }
  .cookie-table tr{
    display:block; margin-bottom: 16px;
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden;
  }
  .cookie-table td{
    display:block; border: none; border-bottom: 1px solid var(--border);
    white-space: normal;
  }
  .cookie-table td:last-child{ border-bottom: none; }
  .cookie-table td::before{
    content: attr(data-label);
    display:block; font-family:'Sora',sans-serif; font-weight:700;
    font-size: .72rem; text-transform: uppercase; letter-spacing:.04em;
    color: var(--accent); margin-bottom: 4px;
  }
}
@media (max-width: 600px){
  .teaser-grid{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .lightbox-prev, .lightbox-next{ width: 38px; height:38px; font-size: .95rem; }
  .lightbox-close{ top: 14px; right: 14px; }
  .lightbox-prev{ left: 10px; }
  .lightbox-next{ right: 10px; }
  .cookie-banner{ left:12px; right:12px; padding: 18px; }
  .cookie-banner-inner{ flex-direction:column; align-items:stretch; }
  .cookie-actions{ justify-content:flex-end; }
  .cookie-tab{ right:14px; bottom:14px; }
}