:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:#e2e8f0;

  --hero:#0b0f19;
  --heroText:#ffffff;

  --accent:#22c55e;
  --accentDark:#16a34a;
  --accentSoft:rgba(34,197,94,.12);

  --subtle:#f8fafc;
  --card:#ffffff;

  --radius:16px;
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --max:1160px;
}

/* Reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
a:hover{opacity:1}

.container{
  width:min(var(--max), calc(100% - 2rem));
  margin:0 auto;
}

.muted{color:var(--muted)}
.hr{border:0;border-top:1px solid var(--border);margin:2.5rem 0}

/* =========================
   HEADER / NAV
========================= */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:900;
  letter-spacing:.12em;
}

.site-nav{
  display:flex;
  align-items:center;
  gap:1rem;
}

.nav-link{
  font-size:.95rem;
  font-weight:600;
  color:var(--muted);
  padding:.45rem .35rem;
  border-radius:10px;
}

.nav-link:hover{
  background:var(--subtle);
  color:var(--text);
}

.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  padding:.55rem .6rem;
}

.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--text);
  margin:4px 0;
  border-radius:2px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.75rem 1rem;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:700;
  transition:.18s ease;
}

.btn:hover{
  box-shadow:var(--shadow);
  transform:translateY(-1px);
}

.btn-accent{
  background:var(--accent);
  border-color:rgba(34,197,94,.5);
  color:#052e16;
}

.btn-accent:hover{
  background:var(--accentDark);
  color:#fff;
}

/* =========================
   HERO FULL WIDTH (FINAL)
========================= */

.hero{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
  background:none;
  min-height:550px;
  color:var(--heroText);
}

@media (max-width:768px){
  .hero{min-height:225px;}
}

.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(11,15,25,.45),
    rgba(11,15,25,.85)
  );
  z-index:1;
}

.hero-inner{
  position:relative;
  z-index:2;
  padding:2.2rem 0 2rem;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2rem;
  align-items:center;
}

@media (max-width:900px){
  .hero-inner{
    grid-template-columns:1fr;
    padding:1.8rem 0 1.4rem;
  }
}

/* =========================
   SECTIONS / CARDS
========================= */

.section{padding:3.1rem 0}
.section.subtle{
  background:var(--subtle);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.h2{
  font-size:1.6rem;
  margin:0 0 1rem;
  letter-spacing:-.01em;
}

.grid{display:grid;gap:1rem}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}

@media (max-width:900px){
  .grid.cols-3{grid-template-columns:1fr}
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem;
  transition:.18s ease;
}

.card:hover{
  box-shadow:var(--shadow);
  transform:translateY(-1px);
  border-color:rgba(34,197,94,.25);
}

/* =========================
   FOOTER
========================= */

.site-footer{
  border-top:1px solid var(--border);
  padding:2.2rem 0 1rem;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
}

.footer-link{
  font-weight:600;
  color:var(--muted);
  margin-left:1rem;
}

.footer-link:hover{color:var(--text)}

.footer-bottom{padding-top:1rem}

/* =========================
   FORMS
========================= */

.label{
  display:block;
  font-weight:700;
  margin:0 0 .35rem;
}

.input{
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  padding:.8rem .9rem;
  font:inherit;
}

.input:focus{
  border-color:rgba(34,197,94,.55);
  box-shadow:0 0 0 4px rgba(34,197,94,.12);
  outline:none;
}

textarea.input{
  resize:vertical;
  min-height:140px;
}
/* ===== HOTFIX: evitar doble imagen en HERO ===== */

/* Si hay algún background en .hero o .hero-media, lo anulamos */
.hero{
  background: none !important;
  background-image: none !important;
}

/* Si alguien puso la imagen como background en hero-media, lo anulamos */
.hero-media{
  background: none !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
}

/* Aseguramos que el hero recorta todo lo que sea absoluto */
.hero{
  overflow: hidden !important;
}

/* Aseguramos que el picture está absolutamente posicionado (no ocupa “2 filas”) */
.hero-media{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
}

/* Y que el <img> cubre SIEMPRE el contenedor */
.hero-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
/* ===== Fix definitivo: botones claros en HERO oscuro (texto siempre visible) ===== */
.hero .btn{
  background:#ffffff;
  color:#0f172a;
  border-color:#e2e8f0;
}

.hero .btn:hover{
  background:#f8fafc;
  color:#0f172a;
}

/* Mantener el botón verde como primario */
.hero .btn.btn-accent{
  background:var(--accent);
  color:#052e16;
  border-color:rgba(34,197,94,.5);
}

.hero .btn.btn-accent:hover{
  background:var(--accentDark);
  color:#ffffff;
}
/* =========================
   FIX MENÚ MÓVIL (OFF CANVAS)
========================= */

@media (max-width:900px){

  .site-header{
    position:sticky;
    z-index:1000;
  }

  .site-nav{
    position:fixed;
    top:64px;              /* justo debajo del header */
    left:0;
    right:0;
    z-index:999;
    background:#ffffff;
    border-top:1px solid var(--border);
    padding:1rem;
    box-shadow:0 20px 40px rgba(0,0,0,.12);

    display:none;
    flex-direction:column;
    gap:.75rem;
  }

  .site-nav.open{
    display:flex;
  }

  .site-nav .btn{
    width:100%;
    justify-content:center;
  }
}
/* =========================
   FIX SCROLL HORIZONTAL
========================= */

/* Nunca permitir overflow horizontal */
html, body{
  overflow-x:hidden;
}

/* Asegurar que hero no empuja ancho */
.hero{
  max-width:100%;
}

/* Evitar que elementos absolutos desborden */
.hero-media,
.hero-media img{
  max-width:100%;
}

/* Menú móvil no debe sobresalir */
.site-nav{
  max-width:100%;
}
/* ===============================
   Servicios Creativos (page scope)
   =============================== */

body.servicios_creativos .container{
  width: min(1100px, calc(100% - 2rem));
  margin-inline: auto;
  padding: 2.5rem 0 4rem;
}

body.servicios_creativos .hero{
  padding: 2.25rem 0 1.5rem;
}

body.servicios_creativos .hero h1{
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 0 0 .75rem;
}

body.servicios_creativos .hero p{
  max-width: 70ch;
  margin: 0 0 1.25rem;
  opacity: .9;
  line-height: 1.6;
}

body.servicios_creativos .hero-cta{
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* Buttons */
body.servicios_creativos .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.1rem;
  border-radius: .75rem;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid transparent;
}

body.servicios_creativos .btn-primary{
  background: #fff;
  color: #0b0f14;
}

body.servicios_creativos .btn-secondary{
  background: transparent;
  color: inherit;
  border-color: rgba(255,255,255,.18);
}

body.servicios_creativos .btn:hover{
  opacity: .92;
}

/* Grid */
body.servicios_creativos .grid{
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

body.servicios_creativos .grid-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 860px){
  body.servicios_creativos .grid-2{
    grid-template-columns: 1fr;
  }
}

/* Cards */
body.servicios_creativos .card{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1rem;
  padding: 1.25rem;
  background: rgba(255,255,255,.03);
}

body.servicios_creativos .card h2{
  margin: 0 0 .6rem;
  font-size: 1.35rem;
}

body.servicios_creativos .card p{
  margin: 0 0 1rem;
  line-height: 1.6;
  opacity: .9;
}

body.servicios_creativos .card.subtle{
  margin-top: 1rem;
  background: rgba(255,255,255,.02);
}

/* Lists / links */
body.servicios_creativos .list{
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}

body.servicios_creativos .list li{
  margin: .35rem 0;
  opacity: .9;
}

body.servicios_creativos .link{
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.25);
  padding-bottom: .15rem;
}

body.servicios_creativos .link:hover{
  border-bottom-color: rgba(255,255,255,.55);
}

body.servicios_creativos .inline-links{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
}

body.servicios_creativos .sep{
  opacity: .45;
}
/* ===============================
   SERVICIOS CREATIVOS (scoped)
=============================== */

body.servicios_creativos main.container{
  padding: 2.25rem 0 3.5rem;
}

body.servicios_creativos .hero{
  padding: 1.25rem 0 1.5rem;
}

body.servicios_creativos .hero h1{
  margin: 0 0 .75rem;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}

body.servicios_creativos .hero p{
  max-width: 72ch;
  margin: 0;
  color: var(--muted);
}

body.servicios_creativos .hero-cta{
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

/* Buttons (alineados con vuestro esquema) */
body.servicios_creativos .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.05rem;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

body.servicios_creativos .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}

body.servicios_creativos .btn-primary{
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

body.servicios_creativos .btn-primary:hover{
  background: var(--accentDark);
}

body.servicios_creativos .btn-secondary{
  background: #fff;
  color: var(--text);
}

/* Grid */
body.servicios_creativos .grid{
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

body.servicios_creativos .grid-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px){
  body.servicios_creativos .grid-2{
    grid-template-columns: 1fr;
  }
}

/* Cards */
body.servicios_creativos .card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}

body.servicios_creativos .card h2{
  margin: 0 0 .6rem;
  font-size: 1.25rem;
  line-height: 1.2;
}

body.servicios_creativos .card p{
  margin: 0 0 1rem;
  color: var(--muted);
}

body.servicios_creativos .card.subtle{
  background: var(--subtle);
  box-shadow: none;
}

/* Lists / links */
body.servicios_creativos .list{
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  color: var(--muted);
}

body.servicios_creativos .list li{
  margin: .35rem 0;
}

body.servicios_creativos .link{
  display: inline-flex;
  font-weight: 800;
  color: var(--text);
  border-bottom: 2px solid var(--accentSoft);
  padding-bottom: .15rem;
}

body.servicios_creativos .link:hover{
  border-bottom-color: var(--accent);
}

body.servicios_creativos .inline-links{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
}

body.servicios_creativos .sep{
  color: var(--muted);
}
/* =========================
   FIX DEFINITIVO NAV MÓVIL
========================= */

/* Evitar scroll horizontal accidental */
html, body{ overflow-x:hidden; }

/* Desktop: hamburguesa oculta, menú visible */
.nav-toggle{ display:none; }

/* Móvil: hamburguesa visible, menú tipo panel */
@media (max-width: 900px){

  /* Mostrar botón */
  .nav-toggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border);
    background:#fff;
    border-radius:12px;
    padding:.55rem .6rem;
  }

  .nav-toggle span{
    display:block !important;
    width:22px;
    height:2px;
    background:var(--text);
    margin:4px 0;
    border-radius:2px;
  }

  /* Ocultar links en línea y mostrar panel al abrir */
  .site-nav{
    display:none !important;
    position:fixed !important;
    top:64px !important;
    left:0 !important;
    right:0 !important;
    z-index:5000 !important;

    background:#fff !important;
    border-top:1px solid var(--border) !important;
    padding:1rem !important;
    box-shadow:0 20px 40px rgba(0,0,0,.12) !important;

    flex-direction:column !important;
    align-items:stretch !important;
    gap:.75rem !important;
  }

  .site-nav.open{
    display:flex !important;
  }

  .site-nav .btn{
    width:100%;
    justify-content:center;
  }

  .nav-cta{ margin-left:0 !important; }

  /* Header siempre por encima del hero */
  .site-header{
    z-index:6000 !important;
  }
}
/* Footer responsive */
.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1.5rem;
  flex-wrap:wrap;
}

.footer-left{
  max-width:420px;
}

.footer-right{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

@media (max-width:768px){
  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-right{
    margin-top:.5rem;
  }
}
/* Fix Lighthouse: H1UserAgentFontSizeInSection */
h1{
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.08;
  margin: 0 0 .75rem;
  letter-spacing: -.03em;
}

/* =========================
   ICONOS EN CARDS (Servicios)
   (robusto con SVG <use>: fuerza stroke por CSS)
========================= */

.card{
  display:flex;
  flex-direction:column;
}

.card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:2.25rem;
  height:2.25rem;

  margin-bottom:.75rem;

  opacity:.95;
  flex-shrink:0;
}

.card-icon svg{
  width:100%;
  height:100%;
  display:block;
}

/* Estado base: gris */
.card-icon svg *{
  stroke: var(--muted);
}

/* Hover + teclado: verde */
.card:hover .card-icon svg *,
.card:focus-within .card-icon svg *{
  stroke: var(--accent);
}

/* Ajuste de jerarquía */
.card h3{
  margin-top:0;
}