/* ===========================
   Reset & variables (sin modo noche)
   =========================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

:root{
  --brand:#A5C742;
  --bg:#ffffff;
  --fg:#121212;
  --muted:#666;
  --pad:min(5vw,28px);
  --radius:18px;
  --header-h:64px;
  --accent:#FCEE21;
}

body{
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  color:var(--fg); background:var(--bg)
}
.container{max-width:1100px; margin:0 auto}

/* Utilidad */
.center{text-align:center}
.visually-hidden{
  position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  width:1px;height:1px;overflow:hidden;white-space:nowrap;border:0;padding:0;margin:0
}

/* ===========================
   Header
   =========================== */
.site-header{
  position:sticky; top:0; z-index:30; background:var(--bg);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px var(--pad);
  border-bottom:none;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  border-radius:0 0 12px 12px;
  min-height:var(--header-h);
}
.logo img{ height:auto; max-height:44px; width:auto; }
.menu-toggle{
  font-size:22px; background:transparent; border:0; display:inline-flex; padding:8px; border-radius:10px;
  color: var(--brand);
}
.site-nav{display:none; gap:22px; align-items:center}
.site-nav a{padding:8px 10px; border-radius:10px}
.site-nav a:hover{background:none; color:var(--brand)}

#overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:.2s }
#overlay.active{opacity:.08; pointer-events:auto;}

main{padding-top:calc(var(--header-h) * .2)}

@media (min-width:900px){
  .menu-toggle{display:none}
  .site-nav{display:flex}
  #overlay{display:none}
}

/* Drawer móvil */
#site-nav.active{
 display:flex; flex-direction:column; position:absolute; left:0; right:0; top:var(--header-h);
 bottom:auto; background:var(--bg); padding:12px var(--pad); gap:10px; border:1px solid #eaeaea; border-top:0;
 border-radius:0 0 12px 12px; box-shadow:0 14px 30px rgba(0,0,0,.12); width:100%; align-items:flex-start;
}
@media (min-width:900px){ #site-nav.active{position:static; flex-direction:row; border:0; padding:0} }

/* ===========================
   Hero (vídeo cover + overlay digital)
   =========================== */
.hero{ position:relative; min-height:70vh; display:grid; place-items:center; overflow:hidden; margin:24px var(--pad) 0; border-radius:18px; background:#000; }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(0,0,0,.58), rgba(0,0,0,.38)),
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.09) 1px, transparent 1px) 0 0/12px 12px,
    repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 2px, transparent 4px);
}
.hero-content{ position:relative; z-index:1; text-align:center; color:#fff; padding:0 var(--pad); }
.hero-content h1{ font-size:clamp(28px,6vw,48px); margin:0 0 6px; text-shadow:0 3px 10px rgba(0,0,0,.85), 0 0 28px rgba(0,0,0,.55); }
.hero-content p{ font-size:clamp(16px,3.5vw,18px); margin:0 0 14px; text-shadow:0 3px 10px rgba(0,0,0,.8), 0 0 22px rgba(0,0,0,.5); }
@media (max-width:600px){ .hero{min-height:60vh; margin:12px var(--pad) 0} }
@media (min-width:1100px){ .hero{min-height:72vh} }

/* Botones */
.btn{ display:inline-block; padding:10px 16px; border-radius:999px; border:2px solid transparent; font-weight:600; transition:.25s ease; }
.btn-primary{background:var(--brand); color:#073;}
.btn-ghost{border-color:var(--brand); color:#000; background:#fff}
.hero .btn{margin-top:10px}
/* Botón Hero */
.hero .btn-primary{ background:transparent; color:var(--brand); border-color:var(--brand); }
.hero .btn-primary:hover{ background:var(--brand); color:#fff; }

/* ===========================
   Secciones
   =========================== */
.section{padding:56px var(--pad)}
.section h2{font-size:clamp(22px,3vw,32px); margin:0 0 16px}

/* ===========================
   Servicios
   =========================== */
.grid{display:grid; gap:16px}
.services-grid{ grid-template-columns:repeat(2,1fr); justify-items:center }
.service{ width:100%; max-width:320px; padding:22px; border:1px solid #eaeaea; border-radius:var(--radius); background:#fff; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.icon-wrap{font-size:42px; color:var(--brand); line-height:1; margin-bottom:10px}
.service h3{margin:10px 0 6px; font-size:18px}
.service p{margin:0; color:var(--muted); font-size:15px}
@media (min-width:900px){ .services-grid{grid-template-columns:repeat(5,1fr)} }

/* ===========================
   Portfolio
   =========================== */
.section.portfolio{background:#fff}
.portfolio-grid{ grid-template-columns:1fr; gap:18px; justify-items:center }
.video{ position:relative; padding-top:56.25%; border-radius:var(--radius); overflow:hidden; background:#000; width:100%; box-shadow:0 4px 12px rgba(0,0,0,.08); transition:transform .25s ease, box-shadow .25s ease; }
.video:hover{ transform:scale(1.02); box-shadow:0 12px 26px rgba(0,0,0,.12); }
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
@media (min-width:700px){ .portfolio-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .portfolio-grid{grid-template-columns:repeat(3,1fr)} }
.more-btn{margin-top:14px}
.more-btn{ background:transparent; color:var(--brand); border-color:var(--brand); }
.more-btn:hover{ background:var(--brand); color:#fff; }

/* ===========================
   Clientes (carrusel)
   =========================== */
#clientes .center{margin-bottom:8px}
.clientes-wrapper{ padding-inline:40px }
.logo-slider{
  --gap: clamp(18px, 3vw, 32px);
  --logo-h: clamp(40px, 5vw, 82px);
  --duration: 28s;
  --fade: 9%;
  position:relative; overflow:hidden; width:100%; padding-block:14px;
  -webkit-mask-image:linear-gradient(to right, transparent 0, black var(--fade), black calc(100% - var(--fade)), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, black var(--fade), black calc(100% - var(--fade)), transparent 100%);
}
.logo-track{ --loop: 0px; display:flex; align-items:center; gap:var(--gap); width:max-content; animation:logos-scroll var(--duration) linear infinite; }
.logo-track img{
  height:var(--logo-h); width:auto; object-fit:contain; opacity:.92;
  /* Escala de grises con contraste mejorado */
  filter: grayscale(1) contrast(1.05) brightness(1);
  transition:transform .2s ease, opacity .2s ease, filter .2s;
}
/* Quita el tinte en un logo concreto si hace falta */
.logo-track img[data-original="true"]{ filter:none; opacity:1 }
.logo-slider:hover .logo-track{ animation-play-state:paused }
.logo-track img:hover{ transform:translateY(-2px) scale(1.03); opacity:1 }
@keyframes logos-scroll{ from{ transform:translateX(0) } to{ transform:translateX(calc(var(--loop) * -1)) } }

/* ===========================
   CTA
   =========================== */
.cta{background:linear-gradient(0deg, #a5c742, #a5c742); text-align:center}
.cta h2{color:#000}
.cta p{color:#0b0b0b}
.cta .btn-ghost{ background:transparent; border-color:#fff; color:#fff }
.cta .btn-ghost:hover{ background:#fff; color:#000 }

/* ===========================
   Footer
   =========================== */
.site-footer{ padding:18px var(--pad); border-top:1px solid #111; background:#000; color:#fff }
.footer-grid{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:16px; max-width:1100px; margin:0 auto 4px }
.foot-col{min-width:220px}
.site-footer a{color:var(--brand); transition:.2s ease}
.site-footer a:hover{color:#fff; background:var(--brand); padding:2px 6px; border-radius:8px}
.social{display:flex; gap:10px; justify-content:center}
.soc{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; background:transparent; border:2px solid var(--brand); color:var(--brand); transition:.2s ease; }
.soc:hover{background:var(--brand); color:#fff}
.copy{margin:4px 0 0; color:#bfbfbf; font-size:12.5px}

/* ===========================
   Responsive tweaks
   =========================== */
@media (max-width:420px){ .clientes-wrapper{padding-inline:20px} .site-header{padding-inline:12px} }

/* Legibilidad para páginas legales */
.section p, .section ul, .section li { max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.7; }
.section ul { padding-left: 20px; }
.section h2 { margin-top: 28px; font-size: 1.4rem; }

/* ===========================
   Legal pages (Aviso / Privacidad)
   =========================== */
.legal-hero{ width: 100%; margin: 28px 0 0; padding: 18px 20px; background: linear-gradient(0deg, rgba(165,199,66,.18), rgba(165,199,66,.18)); color: #000; border: 1px solid #e6efcf; border-radius: 12px; }
.legal-hero h1{ margin: 0; text-align: center; font-size: clamp(26px, 3.4vw, 34px); }
.prose{ max-width: 820px; margin: 0 auto; }
.prose p{ margin: 0 0 14px; line-height: 1.75; color: #252525; }
.prose ul{ margin: 6px 0 18px; padding-left: 22px; }
.prose li{ margin: 6px 0; }
.prose h2{ font-size: clamp(18px, 2.3vw, 22px); margin: 26px 0 10px; }
.prose strong{ color: #111; }
.prose a{ color: var(--brand); text-decoration: none; border-bottom: 1px dashed rgba(165,199,66,.5); }
.prose a:hover{ color: #000; background: rgba(165,199,66,.18); }
.legal-card{ background: #fff; border: 1px solid #eaeaea; border-radius: 14px; padding: 18px 18px; box-shadow: 0 4px 12px rgba(0,0,0,.08); margin: 16px auto 22px; }
.legal hr{ border: 0; height: 1px; background: linear-gradient(90deg, transparent, #e6e6e6, transparent); margin: 24px 0; }

/* Clientes: logos más grandes en pantallas pequeñas */
@media (max-width: 480px){
  .logo-slider{ --logo-h: 60px; --gap: 28px; }
}

/* ===== Post pages: compact spacing + sticky footer ===== */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }          /* empuja el footer al fondo si hay poco contenido */
.site-footer { margin-top: auto; } /* sticky footer simple */

/* Espaciado compacto en cabecera del artículo */
.post header.post-header { margin: 12px auto 8px; max-width: 960px; padding: 0 16px; }
.post header.post-header h1 { margin: 0 0 8px; }

/* Vídeo embebido con radio 16:9 y bordes suaves */
.post .post-video .video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; }
.post .post-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Cuerpo del post */
.post .post-body { max-width: 960px; margin: 16px auto; padding: 0 16px; }

/* Oculta el botón “Ver vídeo completo” si alguna plantilla antigua aún lo tiene */
.post nav.post-cta a.btn[href*="youtube.com/watch"] { display: none !important; }

/* ===========================
   Post / Artículo (scoped)
   =========================== */
/* Contenedor tipo tarjeta */
.post .post-article{
  background:#fff;
  border:1px solid #eaeaea;
  border-radius:16px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  padding:22px 22px 24px;
  max-width:900px;
  margin:16px auto;
}
/* Encabezado + título con gradiente ligero */
.post .post-header{padding:4px 0 6px}
.post .post-header h1{
  margin:0 0 10px;
  font-size:clamp(24px,5vw,36px);
  line-height:1.15; font-weight:800;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-align:center;
}
.post .post-lead{margin:6px 0 8px; color:#333; font-size:clamp(16px,2.5vw,18px); text-align:center}
.post .post-meta{color:#666;font-size:14px;text-align:center}

/* Cuerpo del artículo con mejor legibilidad */
.post .post-body{ max-width: 900px; margin: 12px auto; padding: 0 6px; }
.post .post-body p{margin:14px 0; text-align:justify; text-justify:inter-word;}
.post .post-body li{text-align:justify; text-justify:inter-word;}
.post .post-body img{max-width:100%;height:auto;border-radius:12px;border:1px solid #eaeaea}

/* Vídeo 16:9 con borde suave (mantiene reglas anteriores) */
.post .post-video{padding:10px 0 0}
.post .post-video .video-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px;border:1px solid #eaeaea}
.post .post-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* CTA del post (sin tocar .btn global) */
.post .post-cta{display:flex;gap:12px;margin:20px 0 8px;justify-content:center}
.post .post-cta .btn{border:1px solid #eaeaea;background:#fff;color:#111;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600;cursor:pointer}
.post .post-cta .btn:hover{border-color:#111}