/* ===== Tokens ===== */
:root{
  --background: 220 13% 7%;
  --foreground: 0 0% 98%;
  --ring: 43 96% 67%;
  --shadow-card: 0 8px 25px -8px hsl(220 13% 4% / 0.4);
  --gradient-hero: linear-gradient(135deg, hsl(220 13% 7%) 0%, hsl(220 13% 12%) 50%, hsl(43 96% 67% / 0.1) 100%);
}

html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif}
.font-display{font-family:'Playfair Display',serif}

/* ===== Utilidades ===== */
.bg-gradient-hero{background:var(--gradient-hero)}
.shadow-card{box-shadow:var(--shadow-card)}
.chip{border:1px solid rgba(255,255,255,.12); border-radius:9999px; padding:.25rem .6rem}

/* ===== Botones ==== */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.25rem;border-radius:.75rem;font-weight:700;line-height:1;transition:all .3s ease}
.btn-primary{background:#f6cf68;color:#111827}
.btn-primary:hover{background:#f1b84c}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.15);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.06)}

/* ===== Cabecera de sección con acciones ===== */
.section-head{display:flex;flex-wrap:wrap;align-items:end;gap:1rem;justify-content:space-between}
.section-actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* ===== Hero – viñeta sutil extra ===== */
.vignette:after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.0) 30%, rgba(0,0,0,.45) 85%);
  pointer-events:none;
}

/* ===== Cards proyectos ===== */
.card{background:#111827;border:1px solid rgba(255,255,255,.10);border-radius:1.25rem;overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column}
.card-img{width:100%; height:15rem; /* evita estirar */ object-fit:cover}
@media (min-width:768px){ .card-img{height:16.5rem} }
.card-content{padding:1.5rem;display:flex;flex-direction:column;gap:.25rem;flex:1}
.card-content h3{font-size:1.25rem;font-weight:800}

/* Barra de progreso */
.progress{width:100%;height:.6rem;border-radius:.5rem;background:rgba(255,255,255,.12);overflow:hidden}
.progress>span{display:block;height:100%;background:#f6cf68}

/* ===== Pills fiscal ===== */
.pill{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:1rem;padding:1rem 1.25rem}
.pill .muted{color:rgba(255,255,255,.6);font-size:.9rem}
.pill-num{font-size:1.75rem;font-weight:800;color:#f6cf68}

/* ===== Servicios creadores ===== */
.service{border-radius:1rem;padding:1.5rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}
.service h3{font-weight:800}
.service p{color:rgba(255,255,255,.7);margin-top:.25rem}
.service .price{margin-top:1rem;font-size:1.75rem;font-weight:900;color:#f6cf68}

/* ===== Pasos CTA ===== */
.step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:1rem;padding:1.5rem;text-align:center}
.step .num{font-size:2rem}
.step .title{font-weight:700;margin-top:.25rem}

/* ===== Inputs ===== */
.input{margin-top:.25rem;width:100%;border-radius:.75rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);padding:.6rem .8rem;outline:none}
.input:focus{box-shadow:0 0 0 2px hsl(var(--ring));}

/* ===== Links rápidos contacto ===== */
.quicklink{display:flex;align-items:center;justify-content:space-between;border-radius:1rem;padding:1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}

/* ===== Marcas ===== */
.brand{border-radius:1rem;padding:1.5rem;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}
.brand svg{width:3.5rem;height:3.5rem;fill:#fff;opacity:.9}

/* ===== Accesibilidad ===== */
:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:3px;border-radius:.5rem}

/* Mini cartel dentro del presupuesto */
.mini-poster{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:12px;
}
.mini-poster img{
  width:140px;                /* “ventana” pequeñita */
  height:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:#0e0f12;
  box-shadow: var(--shadow);
}
.mini-poster .meta{
  color:var(--muted);
  font-size:12px;
}
.poster-note{
  display:flex; align-items:center; gap:8px;
  justify-content:flex-end;       /* derecha */
  margin-top:8px;
  color:#8d9299;                  /* gris discreto */
  font-size:12px;
}
.poster-note .note-icon{
  width:14px; height:14px; opacity:.8; filter:grayscale(100%);
}

/* Contenedor de imagen con proporción 2:3 típica de cartel vertical */
.poster-box{
  position: relative;
  aspect-ratio: 2 / 3;         /* mantiene alto automático respecto al ancho */
  background: rgba(255,255,255,.04);
}

/* La imagen se contiene (no se recorta) y se centra */
.poster-img{
  width: 100%;
  height: 100%;
  object-fit: contain;          /* muestra el cartel entero */
  object-position: center;
  display: block;
}

/* Ajuste de chips dentro del área de imagen */
.poster-badges{
  position: absolute;
  top: .75rem;                  /* 12px */
  left: .75rem;
  display: flex;
  gap: .5rem;
}

 
  .float-cta{
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 9999;
  }
  .float-cta .btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:12px 18px;border-radius:14px;font-weight:800;letter-spacing:.02em;
    border:1px solid #2a2f3a;background:linear-gradient(135deg,#60a5fa,#2563eb);
    color:#0d0d0d;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.25);
  }
  .float-cta .btn:hover{filter:brightness(1.05)}
  @media (max-width:520px){
    .float-cta{left:16px;right:16px}
    .float-cta .btn{width:100%}
  }
  @media (prefers-reduced-motion:reduce){
    .float-cta .btn{transition:none}
  }
 
/* Ámbito local al bloque usando la clase .ficha-card para no afectar a otros sitios */
  .ficha-card .credits dl{display:grid;grid-template-columns:160px 1fr;gap:8px 12px;margin:0}
  .ficha-card .credits dt{color:var(--fg, #ffffff);text-transform:uppercase;letter-spacing:.12em;font-size:12px}
  .ficha-card .credits dd{margin:0;color:#22c55e;font-weight:700}
  .ficha-card .credits dd a{color:#22c55e;text-decoration:underline}


  /* 1) En móvil, que la HERO no recorte su contenido */
@media (max-width: 920px){
  .hero{ overflow: visible; }
}

/* 2) Al ir a #anclas, que no queden ocultas bajo el header sticky */
section{ scroll-margin-top: 76px; } /* ajusta 76px si tu header mide distinto */

/* 3) Por si acaso, evita cualquier desborde horizontal */
html, body{ max-width:100%; overflow-x:hidden; }

/* --- Forzar logo por encima del overlay del héroe --- */
.bg-gradient-hero { position: relative; }

.bg-gradient-hero > img,
.bg-gradient-hero > div {
  z-index: 0 !important;     /* fondo y velos, siempre detrás */
}

/* Estructura del hero */
.hero { position: relative; }

/* El velo/overlay SIEMPRE por debajo */
.hero-overlay { z-index: 0; }

/* Logo arriba a la derecha y por encima del velo */
.brand-logo{
  position: absolute;
  top: 24px;          /* ajusta a tu gusto */
  right: 24px;        /* ajusta a tu gusto */
  z-index: 5;         /* por encima del overlay */
  display: flex;
  justify-content: flex-end;   /* lo empuja a la derecha */
  align-items: center;
}

/* Asegurar opacidad total */
.brand-logo img{
  width: clamp(180px, 22vw, 360px);
  height: auto;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  display: block;
}

/* Orden de capas en el hero */
.bg-gradient-hero { position: relative; }

.hero-bg { z-index: 0; }                /* foto de fondo */
.bg-gradient-hero > .absolute { z-index: 1; }  /* velos/overlays */

.brand-logo{
  position: absolute;
  top: 24px;             /* ajusta altura */
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;           /* por encima del overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;           /* opcional, ayuda a centrar en layouts raros */
}

/* deja esta igual */
.brand-logo img{
  width: clamp(180px, 22vw, 360px);
  height: auto;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  display: block;
}

/* ===== Pack Plata — grid y cards locales ===== */
#incluye .grid{
  display: grid;
  gap: 16px;                 /* separación entre tarjetas */
}

@media (min-width: 640px){
  #incluye .grid{ grid-template-columns: 1fr 1fr; }  /* 2 columnas */
}
@media (min-width: 1024px){
  #incluye .grid{ grid-template-columns: 1fr 1fr 1fr; }  /* 3 columnas */
}

/* Card del bloque (sin tocar las demás) */
#incluye .card{
  padding: 1.25rem;          /* espacio interno */
  border-radius: 1rem;
  display: flex;
  gap: .5rem;
  min-height: 100%;
}

/* Icono en pastilla */
#incluye .card .icon{
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(246, 207, 104, .15);   /* dorado suave acorde a tu tema */
  color: #f6cf68;
  font-size: 1.05rem;
  margin-bottom: .35rem;
}

/* Tipografía y espaciados */
#incluye .card h3{
  font-size: 1.05rem;
  font-weight: 800;
  margin: .25rem 0 .15rem;
}
#incluye .card p{
  color: rgba(255,255,255,.75);
  margin: 0;
}
#incluye .kicker{
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  margin-bottom: .5rem;
}
#incluye h2{
  margin: 0 0 1rem;
}