/* ==========================================================================
   0) VARIABLES Y GENERAL
   ========================================================================== */

:root{
  --bg:#0b0c10; --card:#12131a; --muted:#9aa3b2;
  --fg:#e5e7eb; --brand:#335839; --brand-2:#7ee787; --accent:#f59e0b;
  --ring:rgba(126,231,135,.35);
  --link:#7ee787; --link-hover:#9ff5a5; --link-visited:#58a6ff;
  --link-underline:rgba(126,231,135,.45);
  --logo-h:72px;                 /* altura visual “maestra” de logos partners */
  --header-h:64px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color:var(--fg);
  background: radial-gradient(1200px 800px at 20% -10%, #111827 0%, var(--bg) 60%);
}
.nowrap{white-space:nowrap}

/* Seguridad para el atributo [hidden] */
[hidden] { display: none !important; }


/* ==========================================================================
   1) ESTRUCTURA DEL LAYOUT
   ========================================================================== */

.container{max-width:1120px;margin:0 auto;padding:0 20px}
.section{padding:50px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.section.section-breadcrumb{padding:15px 0}
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:32px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.inline-cta{position:relative;overflow:clip} /* evita halos que empujen layout */


/* ==========================================================================
   2) CABECERA Y NAVEGACIÓN — enlaces con subrayado degradado + botón CTA propio
   ========================================================================== */

/* Layout general */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  overflow: visible;
  background-color: #0B0C10 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* línea sutil de separación */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.6),     /* sombra base más visible */
    0 8px 20px rgba(255, 255, 255, 0.03); /* leve luz ambiental */
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:65px;}
.nav{overflow:visible}
.menu{display:flex;gap:22px;align-items:center;list-style:none;margin:0;padding:0}
.menu > li{position:relative}
.submenu{z-index:1100}

/* Botón hamburguesa */
.nav-toggle{display:none}
@media (max-width:960px){
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;font-size:22px;line-height:1;cursor:pointer
  }
}

/* ----- Enlaces del menú ----- */

.menu a:not(.btn){
  position:relative;
  color:var(--fg,#eaeaea);
  text-decoration:none !important;
  font-weight:500;
  padding:2px 0;
  transition:color .25s ease;
}

/* Línea degradada tipo CTA */
.menu a:not(.btn)::after{
  content:"";
  position:absolute;
  left:50%;bottom:-4px;
  width:0;height:2px;
  background:linear-gradient(90deg,#7EE787 0%,#58A6FF 100%);
  border-radius:2px;
  transform:translateX(-50%);
  transition:width .25s ease;
}

/* Hover/focus */
.menu a:not(.btn):hover,
.menu a:not(.btn):focus{color:#fff}
.menu a:not(.btn):hover::after,
.menu a:not(.btn):focus::after{width:100%}

/* ========================================================================== */
/* BOTÓN CTA “Reikna ROI” */
/* ========================================================================== */

.btn.cta{
  display:inline-block;
  padding:.55rem 1.1rem;
  font-weight:600;
  color:#fff;
  background:linear-gradient(90deg,rgba(126,231,135,.18),rgba(88,166,255,.18));
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  text-decoration:none;
  backdrop-filter:saturate(140%) blur(6px);
  transition:background .3s ease,border-color .3s ease,transform .25s ease;
}
.btn.cta:hover,
.btn.cta:focus{
  background:linear-gradient(90deg,#7EE787,#58A6FF);
  border-color:transparent;
  transform:translateY(-1px);
  text-decoration:none;
}

/* Efecto opcional de pulso */
.animate-pulse-glow{
  animation:pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 rgba(126,231,135,0)}
  50%{box-shadow:0 0 8px rgba(126,231,135,.35)}
}

/* ========================================================================== */
/* SUBMENÚ (Sjálfvirkni ▾ Samþættingar) */
/* ========================================================================== */

.has-submenu{
  display:inline-flex;align-items:center;gap:.25rem;position:relative;
}
.has-submenu .chevron{
  font-size:.9em;line-height:1;transform:translateY(1px);
  opacity:.8;cursor:pointer;
  pointer-events:auto;          
  user-select:none;
}
/* Dropdown */
.submenu{
  position:absolute;left:0;top:calc(100% + 8px);
  background: rgba(17, 22, 29, .92);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow:
    0 8px 22px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.02) inset;
  border-radius: 10px;
  min-width:220px;
  padding:.5rem .5rem .75rem;
  display:none;
  z-index:1100;
}
.has-submenu > .submenu::before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:-12px;        
  height:12px;     
  background:transparent;
}

/* Quitar viñetas del submenú */
.submenu li{
  list-style:none;
  margin:0;
  padding:0;
}

/* Enlaces del submenú con mismo subrayado degradado */
.submenu a{
  display:inline-block;
  padding:.45rem .65rem;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  position:relative;
}

/* Línea degradada del mismo estilo que el menú principal */
.submenu a::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:0;height:2px;
  background:linear-gradient(90deg,#7EE787 0%,#58A6FF 100%);
  border-radius:2px;
  transition:width .25s ease;
}

/* Hover/focus */
.submenu a:hover,
.submenu a:focus{color:#fff}
.submenu a:hover::after,
.submenu a:focus::after{width:100%}

/* Mostrar submenú */
@media (hover:hover) and (pointer:fine){
  .has-submenu:hover>.submenu,
  .has-submenu:focus-within>.submenu{display:block}
}

/* Mostrar si no está hidden (progresivo) */
.has-submenu > .submenu:not([hidden]){display:block}

/* Submenú móvil */
@media (max-width:960px){
  .submenu{
    position:static;display:none;background:transparent;border:0;box-shadow:none;
    padding:.25rem 0 0;min-width:0
  }
  .submenu a{color:var(--fg);padding:.35rem 0}
  .has-submenu[data-open="true"] > .submenu{display:block}
}

/* Transiciones suaves */
@media (prefers-reduced-motion:no-preference){
  .submenu{transition:opacity .16s ease, transform .16s ease}
  @media (hover:hover) and (pointer:fine){
    .has-submenu:hover>.submenu{opacity:1;transform:translateY(0)}
    .submenu{opacity:0;transform:translateY(4px)}
    .has-submenu:hover .chevron{transform:translateY(1px) rotate(180deg);opacity:.9}
  }
}

/* Sombra al hacer scroll */
.site-header.is-scrolled{box-shadow:0 6px 18px rgba(0,0,0,.18)}



/* ==========================================================================
   3) MIGAS DE PAN
   ========================================================================== */

.breadcrumb{font-size:0.9rem;margin:1rem 0 2rem}
.breadcrumb ol{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:0.4rem;align-items:center;
}
.breadcrumb li{display:flex;align-items:center}
.breadcrumb li + li::before{
  content:"›";color:#999;margin:0 0.3rem;font-size:0.8em;
}
.breadcrumb a{color:inherit;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb [aria-current="page"]{color:#666;pointer-events:none}


/* ==========================================================================
   4) BOTONES Y ENLACES
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);padding:10px 16px;border-radius:12px;
  text-decoration:none;color:var(--fg);
  transition:transform .06s ease,background .2s,border-color .2s;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.25)}
.btn:disabled,
.btn.disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  pointer-events: none; 
}
.btn.ghost{background:transparent}
.btn.cta{
  background:linear-gradient(90deg, rgba(126,231,135,.18), rgba(88,166,255,.18));
  border:none;font-weight:600;position:relative;border-radius:12px;
}
.btn.cta.full{width:100%}
.btn.large{padding:14px 20px;font-weight:600}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

:where(main,.section,.card,.work-card,.footer-grid) :where(a):not(.btn):not(.logo){
  color:var(--link);
  text-decoration-line:underline;text-decoration-color:var(--link-underline);
  text-decoration-thickness:.12em;text-underline-offset:.18em;
  transition:color .15s,text-decoration-color .15s;
}
:where(main,.section,.card,.work-card,.footer-grid) :where(a):not(.btn):hover{
  color:var(--link-hover);text-decoration-color:currentColor;
}
:where(main,.section,.card,.work-card,.footer-grid) :where(a):not(.btn):visited{
  color:var(--link-visited);
}
a:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}


/* ==========================================================================
   5) COMPONENTES GENÉRICOS
   ========================================================================== */

.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:20px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--ring) inset, 0 8px 24px rgba(0, 0, 0, .35);
}

/* Mini-cards globales */
.mini-card{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 16px;
  height: 100%;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mini-card:hover,
.mini-card:focus-within{
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--ring) inset;
}
.mini-card h3{margin:0 0 6px;font-size:16px}
.mini-card p{margin:0;color:var(--muted);font-size:14px}
.mini-card.reveal:hover,
.mini-card.reveal:focus-within{
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--ring) inset;
}

.checklist{padding-left:18px}
.checklist li{margin:6px 0}


/* ==========================================================================
   6) SECCIÓN HERO
   ========================================================================== */

.hero{padding:50px 0}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero-grid>*,.hero-copy,.hero-media{min-width:0}
.hero-copy h1{font-size:clamp(28px,4vw,44px);line-height:1.1;margin:0 0 16px}
.hero-copy p{color:var(--muted);margin:0 0 16px}
.trust{margin-top:8px;color:var(--muted);font-size:14px}
.underline{box-shadow:inset 0 -0.4em rgba(126,231,135,.35)}
.hero-media img{border-radius:16px;display:block;max-width:100%;height:auto}


/* ==========================================================================
   7) SECCIÓN AI (¿QUÉ HAGO?)
   ========================================================================== */

#ai p, #ai li{overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
#ai img{max-width:100%;height:auto;display:block}

/* Evita recortes en cards genéricas, pero no en el grid de mini-cards */
#ai .card:not(.grid-2){overflow:clip}

/* Contenedor del grid de mini-cards (sin caja propia y SIN hover) */
#ai .card.grid-2{
  background:transparent;
  border:0;
  padding:0;
  overflow:visible;          /* para que se vean sombras de los hijos */
  transform:none;            /* neutraliza efectos globales */
  box-shadow:none;
}
#ai .card.grid-2:hover,
#ai .card.grid-2:focus-within{
  transform:none;            /* anula .card:hover global */
  border-color:transparent;
  box-shadow:none;
}

/* Grid de mini-cards */
#ai .grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

/* Mini-card con su propio hover (se mantiene) */
#ai .grid-2 .mini-card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:16px;
  height:100%;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
#ai .grid-2 .mini-card:hover,
#ai .grid-2 .mini-card:focus-within{
  transform:translateY(-3px);
  border-color:var(--brand);
  box-shadow:0 0 0 2px var(--ring) inset;
}
#ai .grid-2 .mini-card h3{margin:0 0 6px;font-size:16px}
#ai .grid-2 .mini-card p{margin:0;color:var(--muted);font-size:14px}


/* ==========================================================================
   8) SECCIÓN MULTICANAL (FJÖLRÁSA)
   ========================================================================== */

#fjolrasa .lead{color:var(--muted)}
.fj-header{max-width:70ch;margin-bottom:16px}
.fj-grid{display:grid;gap:12px;margin:30px 0;padding:0;list-style:none;grid-template-columns:repeat(4,1fr)}
.fj-item{
  background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:16px;
  padding:14px;display:flex;gap:10px;align-items:flex-start;min-height:112px;
  transition:border-color .2s,transform .2s;
}
.fj-ico{line-height:0;color:var(--brand)}
.fj-item:hover,.fj-item:focus-within{border-color:var(--brand);transform:translateY(-4px)}
.fj-item:hover .fj-ico,.fj-item:focus-within .fj-ico{color:var(--link-hover)}
.fj-body h3{margin:0 0 4px;font-size:16px}
.fj-body p{margin:0;font-size:14px;color:var(--muted)}
.fj-bottom{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:10px}
.fj-checks{display:flex;gap:12px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.fj-checks li{
  background:var(--card);border:1px solid rgba(255,255,255,.12);
  padding:10px 12px;border-radius:999px;font-size:14px;
}


/* ==========================================================================
   9) INTEGRACIONES VERTICALES
   ========================================================================== */

.int-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.int-card{
  background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:16px;
  padding:20px;display:flex;flex-direction:column;gap:10px;transition:transform .2s,border-color .2s;
}
.int-card:hover{transform:translateY(-4px);border-color:var(--brand)}
.int-ico{line-height:0;color:var(--brand)}
.int-card:hover .int-ico,.int-card:focus-within .int-ico{color:var(--link-hover)}
.int-card h3{margin:0;font-size:18px}
.int-card p{margin:0;font-size:14px;color:var(--muted)}
.mini-checks{margin:15px 0;padding-left:18px;color:var(--muted);font-size:14px}
.btn.small{padding:6px 12px;font-size:13px}
.int-footer{margin-top:28px;text-align:center}
.int-footer p{max-width:60ch;margin:0 auto;color:var(--muted)}


/* ==========================================================================
   10) CARRUSEL DE PARTNERS (2 filas, contra-dirección)
   ========================================================================== */

#partners .partners-head{text-align:center;margin-bottom:1.5rem}
.logo-marquee{
  position:relative;display:grid;gap:1.25rem;overflow:hidden;padding-block:.5rem;
  mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-row{position:relative;overflow:hidden}
.logo-track{display:flex;align-items:center;gap:3rem;padding:0;margin:0;list-style:none}
.logo-item{padding:0;margin:0;list-style:none}
.logo-item img{
  display:block;height:var(--logo-h);width:auto;
  filter:contrast(1) brightness(1.1) opacity(.95);
  transition:transform .2s,opacity .2s,filter .2s;
}
.logo-item img:hover{transform:scale(1.04);filter:brightness(1.2) opacity(1)}
.marquee-toggle{
  position:absolute;right:.75rem;top:.75rem;padding:.45rem .65rem;
  color:#0A0A0A;background:#fff;border:1px solid #fff;border-radius:.5rem;
  box-shadow:0 2px 12px rgba(0,0,0,.55);cursor:pointer;font:inherit;line-height:1;font-weight:600;
}
.marquee-toggle:hover{background:#f3f3f3}
.marquee-toggle:focus{outline:2px solid #fff;outline-offset:2px}

/* SEO copy */
.seo-copy{margin-top:1rem;text-align:center;max-width:840px;margin-inline:auto}
.seo-copy p{color:var(--muted)}
.seo-tags{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding:0;margin:.75rem 0 0
}
.seo-tags li{
  list-style:none;padding:.35rem .6rem;border:1px dashed rgba(255,255,255,.25);
  border-radius:999px;font-size:.9rem;color:rgba(255,255,255,.9);background:rgba(255,255,255,.05);
}


/* ==========================================================================
   11) SECCIÓN PROCESO (PASOS + CARD REVEAL)
   ========================================================================== */

.steps{counter-reset:step;margin:0;padding-left:0;list-style:none}
.steps li{
  counter-increment:step;margin:12px 0;padding-left:42px;position:relative;color:var(--fg);line-height:1.5;
}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:9px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  display:grid;place-items:center;color:#0b0c10;font-weight:700;box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
#process .card.reveal{
  background:var(--card);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:20px;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;will-change:transform;
}
#process .card.reveal:hover,
#process .card.reveal:focus-within{
  transform:translateY(-4px);border-color:var(--brand);
  box-shadow:0 0 0 2px var(--ring) inset,0 8px 24px rgba(0,0,0,.35);
}
#process .card.reveal h3{margin-top:0;margin-bottom:.5rem;font-size:1.2rem}
#process .card.reveal p{color:var(--muted);margin-bottom:1rem;line-height:1.5}
#process .card.reveal .mini-checks{list-style:none;padding-left:0;margin-top:1rem}
#process .card.reveal .mini-checks li{
  position:relative;padding-left:1.25em;margin-bottom:.5em;font-size:14px;color:var(--muted);
}
#process .card.reveal .mini-checks li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--brand);font-weight:600;
}


/* ==========================================================================
   12) SECCIÓN COLABORACIÓN (PRICING + HOVER)
   ========================================================================== */

.pricing{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px;
}
.price-card{
  background:var(--card);border:1px solid rgba(255,255,255,.10);border-radius:16px;
  padding:20px;position:relative;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;will-change:transform;
}
.price-card:hover,
.price-card:focus-within{
  transform:translateY(-4px);border-color:var(--brand);
  box-shadow:0 0 0 2px var(--ring) inset,0 8px 24px rgba(0,0,0,.35);
}
.price-card.featured{
  border-color:var(--brand);box-shadow:0 0 0 2px var(--ring) inset;transform:translateY(-2px);
}
.price-card h3{margin-top:0;font-size:1.25rem;margin-bottom:.5rem}
.price-card p{color:var(--muted);line-height:1.55;margin-bottom:1rem}
.price-card .btn{width:100%;justify-content:center}

/* ==========================================================================
   13) FORMULARIOS 
   ========================================================================== */

/* Etiquetas y estructura general */
.form label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--fg);
}

.form-field {
  margin-bottom: 12px;
}

.form-field label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.form-field label span {
  color: var(--brand);
  margin-left: 2px;
  font-weight: 600;
}

/* Inputs y textareas */
.form input:not([type="checkbox"]),
.form textarea {
  background: #0f1117;
  color: var(--fg);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  padding: 10px;
  outline: none;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Foco normal */
.form input:focus,
.form textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Error visual (unificado) */
.form input[aria-invalid="true"],
.form textarea[aria-invalid="true"] {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, .3);
}

/* Mensaje de error */
.form .error {
  color: #f87171;
  font-size: 13px;
  margin-top: 4px;
}

.form .success {
  color: var(--link);
  font-size: 13px;
  margin-top: 4px;
}

/* Checkbox */
.form-field.checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  cursor: pointer;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.form-field.checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 2px 8px 0 0;
  accent-color: var(--brand);
}

/* Acciones */
.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

/* Notas e información */
.form-note {
  color: var(--muted);
  font-size: 12px;
}

/* Estados */
.form.card {
  text-align: left;
}

.form-success,
.form-fail {
  margin-top: 8px;
  font-size: .95rem;
}

.form-success {
  color: #7ee787;
}

.form-fail {
  color: #f59e0b;
}


/* ==========================================================================
   14) SECCIÓN ABOUT
   ========================================================================== */

#about .card.reveal{
  background:var(--card);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:20px;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;will-change:transform;
}
#about .card.reveal:hover,
#about .card.reveal:focus-within{
  transform:translateY(-4px);border-color:var(--brand);
  box-shadow:0 0 0 2px var(--ring) inset,0 8px 24px rgba(0,0,0,.35);
}
#about .card.reveal h3{margin-top:0;margin-bottom:.5rem;font-size:1.25rem}
#about .card.reveal p{color:var(--muted);margin-bottom:1rem;line-height:1.55}
#about .card.reveal .btn.full{width:100%;justify-content:center}


/* ==========================================================================
   15) STEPS (Ferli) — separación vertical entre filas de tarjetas
   ========================================================================== */

/* Espacio entre las filas (cada .grid-2) dentro de #steps */
#steps .grid-2 + .grid-2 { margin-top: 24px; }   /* súbelo a 32px si quieres más aire */

/* Mantén el layout de 2 columnas con gap interno */
#steps .grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px; /* separa tarjetas dentro de la fila */
}

@media (max-width: 980px){
  #steps .grid-2{
    grid-template-columns:1fr;
    gap:16px;
  }
  #steps .grid-2 + .grid-2 { margin-top: 16px; }
}

/* Normalización interna */
#steps .mini-card{ margin:0; }
#steps .mini-card h3{ margin-top:0; }
#steps .mini-card .checklist,
#steps .mini-card p{ margin-top:8px; }

/* Scroll ancla limpio */
#steps{ scroll-margin-top: calc(var(--header-h) + 16px); }


/* ==========================================================================
   16) ANIMACIONES (PULSE + GLOW CTA)
   ========================================================================== */

.animate-pulse-glow{position:relative;isolation:isolate;animation:pulse 1s ease-in-out infinite}
.animate-pulse-glow::after{
  content:"";position:absolute;inset:-20px;border-radius:inherit;z-index:-1;
  background:radial-gradient(circle at center, rgba(126,231,135,.7) 0%, rgba(88,166,255,.45) 40%, transparent 85%);
  filter:blur(40px);opacity:.95;animation:glow 1s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes glow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}


/* ==========================================================================
   17) ACCESIBILIDAD: SKIP LINK
   ========================================================================== */

.skip-link{
  position:fixed;left:12px;top:12px;transform:translateY(-200%);z-index:10000;
  background:#ffffff;color:#0b0c10;padding:10px 14px;border-radius:8px;border:2px solid #0b0c10;
  box-shadow:0 6px 18px rgba(0,0,0,.3);text-decoration:none;font-weight:600;
}
.skip-link:focus{transform:none}

/* ==========================================================================
   18) TOOL LOGOS GRID (n8n, Make, Zapier, etc.)
   ========================================================================== */

.tool-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 2rem;
  justify-items: center;
  align-items: center;
  width: 100%;
  margin: 2rem 0 3rem;
}

.tool-logos figure {
  margin: 0;                 
  /*aspect-ratio: 1 / 1;  */     
  width: 100%;
  max-width: none;           
  display: flex;
  justify-content: center;
  align-items: center;
  /* opcional: darle presencia visual a la celda
  background: transparent;
  border-radius: 12px;*/
}

.tool-logos img {
  /* escala fluida: mínimo 64px, crece con el viewport, máximo 110px */
  height: clamp(64px, 10vw, 110px);
  width: auto;
  max-width: 90%;            /* evita reventar logos muy horizontales */
  object-fit: contain;
  opacity: 0.95;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tool-logos img:hover,
.tool-logos img:focus {
  opacity: 1;
  transform: scale(1.03);
}

#flows.card,
#flows .card,
aside.card[aria-labelledby="flows"] {
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
}

aside.card[aria-labelledby="flows"]:hover,
aside.card[aria-labelledby="flows"]:focus-within {
  transform: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   19) PÁGINA VERKEFNI
   ========================================================================== */

/* ===== FILTROS ===== */
#page-proyectos .chips{
  display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;
  margin:.5rem 0 .25rem;
}
#page-proyectos .btn.chip{
  color:#EAF2FF;
  background:#152033;              /* fondo sólido (mejor contraste) */
  border:1px solid #233146;
  border-radius:999px;
  padding:.45rem .9rem;
  font:600 .95rem/1.2 system-ui,sans-serif;
  box-shadow:none; text-shadow:none;
  transition:background .3s ease, transform .3s ease, border-color .3s ease;
}
#page-proyectos .btn.chip:hover{ background:#1B2A40; transform:translateY(-1px); color: #fff; }
#page-proyectos .btn.chip[aria-pressed="true"]{
  background:var(--brand); border-color:var(--brand); color:#0C0D11;
}

/* ===== TÍTULOS DE GRUPO ===== */
/* Sin pastillas ni pseudo-elementos: una línea inferior sutil */
#page-proyectos .group-title{
  margin:1.1rem 0 .6rem;
  padding-bottom:.35rem;
  border-bottom:1px solid rgba(88,166,255,.28);
  color:#E6EDF3;
  font:700 .95rem/1.25 system-ui,sans-serif;
  letter-spacing:.02em;
  text-transform: uppercase;
}

/* ===== GRID ===== */
#page-proyectos .work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.2rem;                 /* más compacto */
  margin-bottom:1rem;
}
#page-proyectos .work-group + .group-title{ margin-top:1.4rem; } /* menos salto entre grupos */

/* ===== TARJETAS ===== */
#page-proyectos .work-card{
  background:transparent;                /* sin velo gris */
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:1rem 1.05rem 1.1rem;
  transition:border-color .12s ease, transform .12s ease;
}
#page-proyectos .work-card:hover{ transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--ring) inset,0 8px 24px rgba(0,0,0,.35); }

#page-proyectos .work-card header h3{color:#0B0C10;margin:0 0 .25rem;font-size:1.02rem}
#page-proyectos .work-card .muted{color:#C7D1DB}   /* más contraste */
#page-proyectos .work-card p{color:#D5DEE7}
#page-proyectos .work-card .checklist{list-style:none;margin:.6rem 0 .8rem;padding:0}
#page-proyectos .work-card .checklist li::before{content:"✔";color:#58A6FF;margin-right:.45rem}

/* ===== MODO CLARO ===== */
@media (prefers-color-scheme: light) {
  #page-proyectos .work-card {
    background: rgba(20,22,28,0.72);   /* igual que en modo oscuro */
    border-color: rgba(255,255,255,0.12);
  }
  #page-proyectos .work-card header h3,
  #page-proyectos .work-card p,
  #page-proyectos .work-card .muted,
  #page-proyectos .work-card .checklist li {
    color: #E6EDF3;                    /* texto claro constante */
  }
}

/* ===== CHECKLIST: mejora de contraste ===== */
#page-proyectos .work-card .checklist li {
  color: #DDE6F3;                /* texto más claro y legible */
}
#page-proyectos .work-card .checklist li::before {
  content: "✔";
  color: #58A6FF;                /* mantiene el check azul */
  margin-right: .45rem;
}

/* ==========================================================================
   20) BLOG
   ========================================================================== */

/* Quitar padding superior en el blog de WordPress */
body.blog:not(.elementor-page) main,
body.archive:not(.elementor-page) main,
body.single-post:not(.elementor-page) main {
  padding-top: 0;
}

/* ============================
   Hero de la portada del blog
   ============================ */

/* Que el hero del blog sea más estrecho y centrado */
.blog .blog-hero .container {
  max-width: 1120px;       
  margin: 0 auto;
  padding: 0 20px;
}

/* En el blog, el hero va sin imagen: una sola columna */
.blog .blog-hero .hero-grid {
  display: block;         /* en vez de grid 2 cols */
}

/* Limitamos la longitud de línea del texto */
.blog .blog-hero .hero-copy {
  max-width: 720px;
}

/* Ajuste fino de tamaños si lo ves muy grande */
.blog .blog-hero .hero-copy h1 {
  font-size: clamp(28px,4vw,44px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
}

.blog .blog-hero .hero-copy p {
  font-size: 16px;
}

/* 1) Forzar layout en grid, no Masonry absoluto */
.pe-archive-grid {
  position: static !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 32px;
}

/* Quitar posicionamiento absoluto que mete el JS del tema */
.pe-archive-grid .pe-archive-post {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Opcional: ocultar sizer/gutter del Masonry */
.pe-archive-grid-sizer,
.pe-archive-grid-gutter {
  display: none !important;
}

/* Responsive: 1 columna en móvil */
@media (max-width: 768px) {
  .pe-archive-grid {
    grid-template-columns: 1fr;
  }
}

/* Estilo para los títulos de los posts en el listado del blog */
.pe-archive-post-details .entry-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px;
}

.pe-archive-post-details .entry-title a {
    color: var(--fg);
    text-decoration: none;
}

.pe-archive-post-details .entry-title a:hover {
    color: #fff;
}



/* ==========================================================================
   21) FOOTER
   ========================================================================== */

.site-footer{
  margin-top:48px;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

.site-footer .footer-grid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr; /* brand más ancho */
  gap:28px 24px;
  align-items:start;
  padding:36px 20px; /* respeta .container pero da respiro vertical */
}

.site-footer .footer-brand .tagline{
  color:var(--muted);
  margin:10px 0 0;
  max-width:42ch;
}

.site-footer .footer-nav h3,
.site-footer .footer-contact h3,
.site-footer .langs h3{
  margin:0 0 .6rem;
  font-size:1rem;
  line-height:1.2;
}

.site-footer .footer-nav ul,
.site-footer .footer-contact ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.35rem;
}

.site-footer .footer-contact .locations{
  color:var(--muted);
  margin:.8rem 0 0;
}

.site-footer .langs p{
  margin:.25rem 0 0;
}

.site-footer .legal{
  border-top:1px solid rgba(255,255,255,.08);
  padding:14px 20px 26px;
  text-align:center;
  color:var(--muted);
  font-size:.95rem;
}


/* ==========================================================================
   22) COOKIES & CONSENT (BANNER + MODAL + LÓGICA DE VISIBILIDAD)
   ========================================================================== */
/* ============================
   CONTENEDORES BASE
   ============================ */
.cc-banner,
.cc-modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:end center; /* ambos alineados abajo */
  padding:1rem;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);
  z-index:10000;
  font-family:inherit;
  line-height:1.5;
}

/* Fondo translúcido solo para el modal */
.cc-modal{
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  /* un pelín más de aire para diferenciar del banner */
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 2rem);
}

/* Contenedores internos */
.cc-inner,
.ccm-inner{
  width:min(96vw,720px);
  max-width:720px;
}

/* Tarjetas principales */
.cc-inner.card,
.ccm-inner.card{
  padding:1.25rem 1.5rem;
  border-radius:14px;
  background:#fff;
  color:#111;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:
    0 8px 24px rgba(0,0,0,.12),
    0 2px 6px rgba(0,0,0,.06);
}

/* El modal se eleva un poco para dar jerarquía */
.ccm-inner.card{ transform:translateY(-0.5rem); }

/* Titulares y texto */
#cc-title,
#ccm-title{
  margin:0 0 .5rem 0;
  font-size:clamp(1.05rem,1vw + .9rem,1.25rem);
  line-height:1.25;
}
.cc-inner p,
.ccm-inner p{
  margin:.5rem 0 .25rem;
  color:inherit;
}

/* Acciones comunes */
.cc-actions,
.ccm-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:.9rem;
  justify-content:flex-end;
}

/* ============================
   BOTONES DEL BANNER
   ============================ */
.cc-banner .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.15);
  padding:10px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:500;
  transition:transform .06s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}

/* === Hafna + Samþykkja allt === (mismo estilo sólido) */
.cc-banner .btn[data-cc="reject"],
.cc-banner .btn[data-cc="accept"]{
  background:#111;
  color:#fff;
  border-color:#111;
}
.cc-banner .btn[data-cc="reject"]:hover,
.cc-banner .btn[data-cc="accept"]:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}

/* === Stillingar === (outline discreto) */
.cc-banner .btn[data-cc="settings"]{
  background:transparent;
  color:#111;
  border-color:rgba(0,0,0,.35);
}
.cc-banner .btn[data-cc="settings"]:hover{
  border-color:rgba(0,0,0,.55);
  transform:translateY(-1px);
}

/* ============================
   OPCIONES DEL MODAL
   ============================ */
.ccm-inner h2,
.ccm-inner p{ color:#111; }

.cc-opt{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  margin:.5rem 0;
  line-height:1.35;
}
.cc-opt input{ margin-top:.25rem; }

/* Botones del modal */
.ccm-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  padding:10px 18px;
  font-weight:500;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.15);
  transition:transform .06s ease,background .2s ease,border-color .2s ease;
  color:#111;
}

/* === Aceptar y Rechazar — sólidos === */
.ccm-actions .btn[data-cc="accept"],
.ccm-actions .btn[data-cc="reject"]{
  background:#111;
  color:#fff;
  border-color:#111;
}
.ccm-actions .btn[data-cc="accept"]:hover,
.ccm-actions .btn[data-cc="reject"]:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}

/* === Guardar / Cerrar — outline === */
.ccm-actions .btn[data-cc="save"],
.ccm-actions .btn[data-cc="close"]{
  background:transparent;
  color:#111;
  border-color:rgba(0,0,0,.35);
}
.ccm-actions .btn[data-cc="save"]:hover,
.ccm-actions .btn[data-cc="close"]:hover{
  border-color:rgba(0,0,0,.55);
  transform:translateY(-1px);
}

/* Focus visible */
.cc-banner .btn:focus-visible,
.ccm-actions .btn:focus-visible{
  outline:2px solid #5b9dff;
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(91,157,255,.25);
}

/* ============================
   RESPONSIVE + MOTION
   ============================ */
@media (max-width:540px){
  .cc-actions,
  .ccm-actions{ justify-content:stretch; }
  .cc-actions .btn,
  .ccm-actions .btn{ flex:1 1 auto; }
}
@media (prefers-reduced-motion:reduce){
  .cc-banner .btn,
  .ccm-actions .btn{ transition:none; }
}

/* ============================
   MODO OSCURO
   ============================ */
@media (prefers-color-scheme:dark){
  .cc-inner.card,
  .ccm-inner.card{
    background:#1b1b1f;
    color:#f2f2f2;
    border-color:rgba(255,255,255,.12);
    box-shadow:
      0 12px 28px rgba(0,0,0,.7),
      0 2px 6px rgba(0,0,0,.4);
  }

  /* Texto */
  .cc-inner.card h2,
  .cc-inner.card p,
  .ccm-inner h2,
  .ccm-inner p{ color:#f2f2f2; }

  /* Hafna + Samþykkja allt (sólidos claros) */
  .cc-banner .btn[data-cc="reject"],
  .cc-banner .btn[data-cc="accept"],
  .ccm-actions .btn[data-cc="reject"],
  .ccm-actions .btn[data-cc="accept"]{
    background:#fff;
    color:#111;
    border-color:#fff;
  }
  .cc-banner .btn[data-cc="reject"]:hover,
  .cc-banner .btn[data-cc="accept"]:hover,
  .ccm-actions .btn[data-cc="reject"]:hover,
  .ccm-actions .btn[data-cc="accept"]:hover{
    filter:brightness(0.95);
  }

  /* Stillingar + Guardar + Cerrar (outline claro) */
  .cc-banner .btn[data-cc="settings"],
  .ccm-actions .btn[data-cc="save"],
  .ccm-actions .btn[data-cc="close"]{
    background:transparent;
    color:#fff;
    border-color:rgba(255,255,255,.45);
  }
  .cc-banner .btn[data-cc="settings"]:hover,
  .ccm-actions .btn[data-cc="save"]:hover,
  .ccm-actions .btn[data-cc="close"]:hover{
    border-color:rgba(255,255,255,.65);
  }
}

/* ============================
   TRANSICIONES DE APARICIÓN
   ============================ */
/* Transición basada en [hidden] (no requiere clases extras) */
.cc-banner,
.cc-modal{ transition: opacity .25s ease; }
.cc-banner[hidden],
.cc-modal[hidden]{
  opacity:0;
  pointer-events:none;
}


/* ==========================================================================
   23) RESPONSIVE (TODOS LOS MEDIA QUERIES)
   ========================================================================== */

/* ≥1200px → desktop amplio */
@media (min-width:1200px){
  :root{ --logo-h:80px }
}

/* ≥768px → ajuste de altura logos partners */
@media (min-width:768px){
  :root{ --logo-h:72px }
}

/* ≤1200px */
@media (max-width:1200px){
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:24px; padding:32px 20px}
}

/* ≤1100px */
@media (max-width:1100px){
  .fj-grid{grid-template-columns:repeat(3,1fr)}
}

/* ≤980px */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .work-grid,.pricing{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}

  /* ajustes locales de secciones */
  #process .card.reveal{margin-top:1.5rem}
  #about .card.reveal{margin-top:1.5rem}
}

/* ≤840px → header fijo + menú móvil */
@media (max-width:840px){
  .nav-toggle{display:block}
  .site-header{position:fixed;top:0;left:0;right:0;z-index:9999;background:rgba(11,12,16,.6)}
  body{padding-top:var(--header-h)}
  .menu{
    position:fixed;inset:var(--header-h) 0 auto 0;background:rgba(11,12,16,.98);
    backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08);
    padding:14px 20px;flex-direction:column;align-items:flex-start;
    transform:translateY(-130%);transition:transform .2s ease;
  }
  .menu.open{transform:translateY(0)}
  html,body{overflow-x:hidden}
}

/* ≤768px */
@media (max-width:768px){
    .tool-logos {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-grid{grid-template-columns:1fr;padding:32px 24px}
    .tool-logos {
        grid-template-columns: repeat(2, 80px);
    }
}

/* ≤640px */
@media (max-width:640px){
  .fj-grid{grid-template-columns:repeat(2,1fr)}
}

/* ≤576px → móviles pequeños */
@media (max-width:576px){
  .grid-2,#ai .grid-2{grid-template-columns:1fr}
  .grid-2 .form-field{margin-bottom:12px}
  .animate-pulse-glow::after{display:none}
  /* grid de "what" si lo usas en otra sección */
  #what .grid-2{grid-template-columns:1fr}
}

/* ≤480px → móviles muy pequeños */
@media (max-width: 480px) {
  .tool-logos {
    grid-template-columns: 1fr;
  }
}

/* Preferencias de reducción de movimiento */
@media (prefers-reduced-motion:reduce){
  .logo-track{transform:none !important}
  .marquee-toggle{display:none}
  .animate-pulse-glow{animation:none}
  .animate-pulse-glow::after{animation:none;display:none}
}