/* ------------------------------------------------------------------
   impulsamarketingdigital.es
   Estilos propios. Complementa styles.css (utilidades del diseño Readdy)
   ------------------------------------------------------------------ */

/* ============ Utilidades que faltaban en el CSS compilado ============ */
.gap-6{gap:1.5rem}
.gap-12{gap:3rem}
.mt-14{margin-top:3.5rem}
.mt-16{margin-top:4rem}
.text-left{text-align:left}
.relative{position:relative}

@media (width>=768px){
  .md\:mt-14{margin-top:3.5rem}
}

@media (width>=1024px){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:gap-16{gap:4rem}
}

/* ============ Base ============ */
.icon{
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0;
}

body{
  overflow-x:hidden;
}

/* ============ Cabecera reactiva al scroll ============ */
.site-header{
  transition:background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
  background-color:transparent;
  border-bottom-color:transparent;
}

.site-header .nav-link,
.site-header .brand{
  color:oklch(var(--background-50));
  transition:color .35s ease;
}

.site-header .burger{
  color:oklch(var(--background-50));
  transition:color .35s ease;
}

.site-header.is-stuck{
  background-color:oklch(var(--background-50) / .92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:oklch(var(--background-200));
  box-shadow:0 1px 24px -8px oklch(var(--foreground-950) / .18);
}

.site-header.is-stuck .brand{color:oklch(var(--foreground-950))}
.site-header.is-stuck .nav-link{color:oklch(var(--foreground-700))}
.site-header.is-stuck .burger{color:oklch(var(--foreground-950))}

/* Páginas interiores: cabecera siempre sólida */
.site-header.is-solid{
  background-color:oklch(var(--background-50) / .92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:oklch(var(--background-200));
}
.site-header.is-solid .brand{color:oklch(var(--foreground-950))}
.site-header.is-solid .nav-link{color:oklch(var(--foreground-700))}

/* Subrayado animado en el menú */
.nav-link{
  position:relative;
  padding-bottom:2px;
}

.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1.5px;
  background-color:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}

.nav-link:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}

/* ============ Botones ============ */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-weight:600;
  border-radius:.5rem;
  padding:.95rem 2rem;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, background-color .25s ease;
  will-change:transform;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn:active{
  transform:translateY(0);
}

.btn-primary{
  background-color:oklch(var(--primary-500));
  color:oklch(var(--background-50));
  box-shadow:0 4px 14px -4px oklch(var(--primary-500) / .5);
}

.btn-primary:hover{
  background-color:oklch(var(--primary-600));
  box-shadow:0 10px 26px -6px oklch(var(--primary-500) / .55);
}

.btn-accent{
  background-color:oklch(var(--accent-500));
  color:oklch(var(--background-50));
  box-shadow:0 4px 14px -4px oklch(var(--accent-500) / .5);
}

.btn-accent:hover{
  background-color:oklch(var(--accent-600));
  box-shadow:0 10px 26px -6px oklch(var(--accent-500) / .55);
}

.btn-ghost{
  border:1px solid oklch(var(--background-100) / .55);
  color:oklch(var(--background-50));
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.btn-ghost:hover{
  background-color:oklch(var(--background-50) / .14);
  border-color:oklch(var(--background-50) / .8);
}

.btn-sm{
  padding:.65rem 1.35rem;
  font-size:.875rem;
  border-radius:.4rem;
}

/* ============ Hero ============ */
.hero-media{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  transform:scale(1.06);
  animation:kenburns 24s ease-in-out infinite alternate;
}

@keyframes kenburns{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(0,-1.5%,0)}
}

.hero-veil{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,
      oklch(var(--foreground-950) / .52) 0%,
      oklch(var(--foreground-950) / .34) 42%,
      oklch(var(--foreground-950) / .55) 100%);
}

.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:oklch(var(--background-100) / .92);
}

.hero-eyebrow span{
  display:none;
  width:2rem;
  height:1px;
  background-color:oklch(var(--background-100) / .6);
}

@media (width>=640px){
  .hero-eyebrow span{display:block}
}

@media (width>=768px){
  .hero-eyebrow{font-size:.8125rem}
}

/* Indicador de scroll */
.scroll-hint{
  position:absolute;
  left:50%;
  bottom:2.25rem;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  color:oklch(var(--background-50) / .75);
  font-size:.6875rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  animation:floaty 2.6s ease-in-out infinite;
}

.scroll-hint-line{
  width:1px;
  height:2.75rem;
  background:linear-gradient(to bottom, oklch(var(--background-50) / .7), transparent);
}

@keyframes floaty{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,7px)}
}

/* ============ Banda animada (marquee) ============ */
.marquee{
  overflow:hidden;
  background-color:oklch(var(--accent-950));
  color:oklch(var(--background-100));
  padding:1.1rem 0;
  border-top:1px solid oklch(var(--accent-900));
  border-bottom:1px solid oklch(var(--accent-900));
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track{
  display:flex;
  width:max-content;
  animation:slide 38s linear infinite;
}

.marquee:hover .marquee-track{
  animation-play-state:paused;
}

.marquee-group{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.marquee-group span{
  display:inline-flex;
  align-items:center;
  gap:1.75rem;
  padding:0 1.75rem;
  font-family:var(--font-heading), serif;
  font-size:1.05rem;
  font-weight:500;
  white-space:nowrap;
}

.marquee-group span::after{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background-color:oklch(var(--primary-500));
  flex-shrink:0;
}

@media (width>=768px){
  .marquee-group span{font-size:1.25rem}
}

@keyframes slide{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* ============ Animaciones de entrada ============ */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--reveal-delay, 0ms);
}

[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

/* El hero entra solo, sin esperar al scroll */
.hero-in{
  opacity:0;
  transform:translateY(20px);
  animation:heroIn .95s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--reveal-delay, 0ms);
}

@keyframes heroIn{
  to{opacity:1;transform:translateY(0)}
}

/* ============ Etiqueta de sección ============ */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:oklch(var(--primary-600));
}

.eyebrow::before{
  content:"";
  width:1.75rem;
  height:1.5px;
  background-color:oklch(var(--primary-500));
}

.eyebrow-accent{color:oklch(var(--accent-700))}
.eyebrow-accent::before{background-color:oklch(var(--accent-600))}

@media (width>=768px){
  .eyebrow{font-size:.8125rem}
}

/* ============ Tarjetas de servicio ============ */
.card{
  position:relative;
  padding:1.75rem;
  border-radius:.85rem;
  border:1px solid oklch(var(--background-200));
  background-color:oklch(var(--background-50));
  overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
  will-change:transform;
}

.card:hover{
  transform:translateY(-5px);
  border-color:oklch(var(--background-300));
  box-shadow:0 18px 40px -18px oklch(var(--foreground-950) / .28);
}

.card-featured{
  background-color:oklch(var(--primary-500));
  border-color:oklch(var(--primary-500));
  color:oklch(var(--background-50));
}

.card-featured:hover{
  border-color:oklch(var(--primary-400));
  box-shadow:0 18px 44px -16px oklch(var(--primary-600) / .55);
}

/* brillo diagonal al pasar el ratón */
.card::after{
  content:"";
  position:absolute;
  top:0;
  left:-70%;
  width:45%;
  height:100%;
  background:linear-gradient(100deg, transparent, oklch(var(--background-50) / .16), transparent);
  transform:skewX(-16deg);
  transition:left .75s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}

.card:hover::after{left:130%}

.card-icon{
  width:3rem;
  height:3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:.6rem;
  background-color:oklch(var(--accent-100));
  color:oklch(var(--accent-700));
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}

.card:hover .card-icon{
  transform:translateY(-2px) rotate(-5deg) scale(1.06);
}

.card-featured .card-icon{
  background-color:oklch(var(--background-50) / .16);
  color:oklch(var(--background-50));
}

.card-title{
  margin-top:1.5rem;
  font-family:var(--font-heading), serif;
  font-size:1.3rem;
  font-weight:600;
  line-height:1.3;
  color:oklch(var(--foreground-950));
}

.card-featured .card-title{color:oklch(var(--background-50))}

.card-text{
  margin-top:.75rem;
  font-size:.95rem;
  line-height:1.65;
  color:oklch(var(--foreground-600));
}

.card-featured .card-text{color:oklch(var(--background-100) / .92)}

@media (width>=768px){
  .card{padding:2rem}
  .card-title{font-size:1.45rem}
  .card-text{font-size:1rem}
}

/* ============ Método ============ */
.steps{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}

@media (width>=640px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (width>=1024px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* línea que une los pasos */
  .steps::before{
    content:"";
    position:absolute;
    top:3.9rem;
    left:8%;
    right:8%;
    height:1.5px;
    background:repeating-linear-gradient(to right,
      oklch(var(--secondary-300)) 0 7px,
      transparent 7px 15px);
    z-index:0;
  }
}

.step{
  position:relative;
  z-index:1;
  background-color:oklch(var(--background-50));
  border:1px solid oklch(var(--background-200));
  border-radius:.85rem;
  padding:1.75rem;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}

.step:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px -18px oklch(var(--foreground-950) / .25);
}

.step-num{
  position:absolute;
  top:1.25rem;
  right:1.35rem;
  font-family:var(--font-heading), serif;
  font-size:3rem;
  font-weight:600;
  line-height:1;
  color:oklch(var(--background-200));
  user-select:none;
  transition:color .35s ease;
}

.step:hover .step-num{color:oklch(var(--secondary-200))}

.step-icon{
  width:3rem;
  height:3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:.6rem;
  background-color:oklch(var(--secondary-100));
  color:oklch(var(--secondary-700));
}

@media (width>=768px){
  .step{padding:2rem}
  .step-num{font-size:3.75rem}
}

/* ============ Enlaces en texto ============ */
.link-inline{
  color:oklch(var(--primary-600));
  font-weight:500;
  text-decoration:none;
  background-image:linear-gradient(oklch(var(--primary-400)), oklch(var(--primary-400)));
  background-size:100% 1.5px;
  background-position:0 100%;
  background-repeat:no-repeat;
  padding-bottom:1px;
  transition:color .25s ease, background-size .3s cubic-bezier(.16,1,.3,1);
}

.link-inline:hover{
  color:oklch(var(--primary-700));
  background-size:100% 100%;
  background-image:linear-gradient(oklch(var(--primary-100)), oklch(var(--primary-100)));
}

/* ============ Bloques de texto ============ */
.prose-block{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}

/* Cita destacada */
.pullquote{
  position:relative;
  font-family:var(--font-heading), serif;
  font-size:1.5rem;
  font-weight:500;
  line-height:1.4;
  color:oklch(var(--foreground-950));
}

@media (width>=768px){
  .pullquote{font-size:2.25rem}
}

.quote-badge{
  width:3rem;
  height:3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:.6rem;
  background-color:oklch(var(--accent-500));
  color:oklch(var(--background-50));
  box-shadow:0 10px 24px -10px oklch(var(--accent-600) / .7);
}

/* ============ Lista con checks ============ */
.check-list{
  display:flex;
  flex-direction:column;
  gap:.9rem;
}

.check-list li{
  position:relative;
  padding-left:2.35rem;
  font-size:1rem;
  line-height:1.6;
  color:oklch(var(--foreground-700));
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}

.check-list li:hover{transform:translateX(3px)}

.check-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.1rem;
  width:1.6rem;
  height:1.6rem;
  border-radius:.4rem;
  background-color:oklch(var(--accent-100));
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d6b3d' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:.95rem;
  background-position:center;
  background-repeat:no-repeat;
}

@media (width>=768px){
  .check-list li{font-size:1.0625rem}
}

/* ============ Etiquetas de servicios ============ */
.pill{
  padding:.55rem 1.15rem;
  border-radius:9999px;
  background-color:oklch(var(--secondary-100));
  color:oklch(var(--secondary-900));
  font-size:.875rem;
  font-weight:500;
  white-space:nowrap;
  transition:transform .3s cubic-bezier(.16,1,.3,1), background-color .3s ease;
}

.pill:hover{
  transform:translateY(-3px);
  background-color:oklch(var(--secondary-200));
}

/* ============ Preguntas frecuentes ============ */
.faq-list{
  display:flex;
  flex-direction:column;
}

.faq-item{
  border-top:1px solid oklch(var(--background-200));
}

.faq-item:last-child{
  border-bottom:1px solid oklch(var(--background-200));
}

.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.5rem 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-heading), serif;
  font-size:1.125rem;
  font-weight:600;
  line-height:1.4;
  color:oklch(var(--foreground-950));
  transition:color .25s ease;
}

.faq-item summary::-webkit-details-marker{display:none}

.faq-item summary:hover{color:oklch(var(--primary-600))}

.faq-toggle{
  flex-shrink:0;
  width:1.85rem;
  height:1.85rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background-color:oklch(var(--background-100));
  color:oklch(var(--primary-600));
  transition:transform .35s cubic-bezier(.16,1,.3,1), background-color .25s ease;
}

.faq-item[open] .faq-toggle{
  transform:rotate(45deg);
  background-color:oklch(var(--primary-500));
  color:oklch(var(--background-50));
}

.faq-answer{
  overflow:hidden;
  padding-bottom:1.5rem;
  font-size:1rem;
  line-height:1.7;
  color:oklch(var(--foreground-600));
  animation:faqOpen .4s cubic-bezier(.16,1,.3,1);
}

@keyframes faqOpen{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

@media (width>=768px){
  .faq-item summary{padding:1.75rem 0;font-size:1.3rem}
  .faq-answer{font-size:1.0625rem;padding-bottom:1.75rem}
}

/* ============ Menú móvil ============ */
.mobile-menu{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  padding:.5rem 1rem 1.25rem;
  background-color:oklch(var(--background-50) / .98);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid oklch(var(--background-200));
  animation:menuDrop .3s cubic-bezier(.16,1,.3,1);
}

@keyframes menuDrop{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}

.mobile-menu[hidden]{display:none}

.mobile-menu-link{
  padding:.85rem .25rem;
  font-size:.95rem;
  font-weight:500;
  color:oklch(var(--foreground-800));
  border-bottom:1px solid oklch(var(--background-200));
  text-decoration:none;
}

.mobile-menu-link:last-child{border-bottom:none}

.mobile-menu-cta{
  margin-top:.65rem;
  text-align:center;
  background-color:oklch(var(--primary-500));
  color:oklch(var(--background-50));
  border-radius:.45rem;
  border-bottom:none;
  padding:.85rem 1rem;
  font-weight:600;
}

/* ============ Pie ============ */
.footer-link{
  position:relative;
  color:oklch(var(--background-100) / .8);
  transition:color .25s ease;
}

.footer-link:hover{color:oklch(var(--background-50))}

/* ============ Accesibilidad ============ */
a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:2px solid oklch(var(--primary-500));
  outline-offset:3px;
  border-radius:3px;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .hero-in{opacity:1;transform:none}
  .hero-media img{animation:none;transform:scale(1.02)}
}