/* Tipografías alojadas en el propio sitio (Inter y Outfit, licencia SIL OFL): no se carga nada de servidores de Google */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:200 700; font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:200 700; font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Outfit'; font-style:normal; font-weight:300 600; font-display:swap;
  src:url('/assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Outfit'; font-style:normal; font-weight:300 600; font-display:swap;
  src:url('/assets/fonts/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   Dreamtic — Design tokens
   Sistema propio inspirado en la referencia "Dala": vacío negro absoluto,
   un único acento saturado, tipografía a gran escala como única fuente
   de jerarquía, cero tarjetas/sombras.
   ========================================================================== */
:root{
  /* Color */
  --void:        #000000;   /* lienzo — negro absoluto, no gris oscuro */
  --bone:        #ffffff;   /* texto principal */
  --ash:         #9a9a9a;   /* texto secundario, nav inactivo */
  --silver:      #bdbdbd;   /* texto terciario */
  --signal:      #1a5cf0;   /* acento único — botones, marca */
  --signal-soft: #4d7dff;
  --amber:       #ffb648;   /* acento cálido — solo para énfasis puntual */
  --navy:        #0b1834;   /* profundidad del degradado del logo */
  --hairline:    rgba(154,154,154,0.16);

  /* Type — un único tipo de letra, la jerarquía la da la escala */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Titulares: geométrica redondeada, cercana a la del logotipo */
  --font-display: 'Outfit', 'Inter', ui-sans-serif, system-ui, sans-serif;

  --text-caption:   0.75rem;
  --text-nav:       0.875rem;
  --text-body:      1.125rem;
  --text-2xs:       1.5rem;
  --text-xs:        1.7rem;
  --text-sub:       2.25rem;
  --text-sm:        clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  --text-md:        clamp(2.2rem, 1.6rem + 2.6vw, 3rem);
  --text-lg:        clamp(2.4rem, 1.3rem + 5vw, 4.9rem);
  --text-display:   clamp(2.3rem, 0.9rem + 7.2vw, 7.05rem);

  --max-w: 1280px;
  --gap-section: clamp(80px, 11vw, 150px);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: 200;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }

.wrap{
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

p{ margin:0; font-weight: 200; }

::selection{ background: var(--signal); color: #fff; }
:focus-visible{ outline: 2px solid var(--signal-soft); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Eyebrow label — Dala's small uppercase amber tag above body copy */
.eyebrow{
  display:inline-block;
  font-size: var(--text-nav);
  font-weight: 600;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 18px;
}

/* Scroll-reveal — solo se ocultan si hay JS activo (ver .js en <html>) */
.js .reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.js .reveal.is-visible{ opacity: 1; transform: none; }
.reveal--delay-1{ transition-delay: .08s; }
.reveal--delay-2{ transition-delay: .16s; }
.reveal--delay-3{ transition-delay: .24s; }

/* ==========================================================================
   Buttons — one filled pill accent, ghost text elsewhere
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding: 15px 26px;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--text-nav);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn--primary{ background: var(--signal); color: #fff; }
.btn--primary:hover{ box-shadow: 0 10px 34px -8px rgba(26,92,240,0.6); transform: translateY(-2px); }

.ghost{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  color: var(--bone);
  font-size: var(--text-nav);
  font-weight: 500;
  position:relative;
  padding-bottom: 3px;
}
.ghost::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.ghost:hover::after{ transform: scaleX(1); }
.ghost .arrow{ transition: transform .25s ease; }
.ghost:hover .arrow{ transform: translateX(4px); }

/* ==========================================================================
   Nav: barra blanca fija, logo oscuro, enlaces y botón agrupados a la derecha
   ========================================================================== */
.nav{ position: fixed; top: 0; left: 0; right: 0; z-index: 50; background:#fff; border-bottom: 1px solid #e3e8f4; }
.nav .wrap:first-child{ display:flex; align-items:center; justify-content: space-between; height: 72px; }
.nav__brand img{ height: 34px; width:auto; }
.nav__right{ display:flex; align-items:center; gap: clamp(20px, 2.6vw, 40px); }

.nav__links{ align-items:center; gap: clamp(20px, 2.4vw, 36px); display:none; }
@media (min-width: 780px){ .nav__links{ display:flex; } }
.nav__links a{
  font-size: var(--text-nav); font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em;
  color: #55627f; position: relative; padding-bottom: 4px; transition: color .2s ease;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background: var(--navy); transform: scaleX(0); transform-origin:left; transition: transform .25s ease;
}
.nav__links a:hover{ color: var(--navy); }
.nav__links a:hover::after{ transform: scaleX(1); }

.nav__cta{ display:none; padding: 10px 20px; }
@media (min-width: 780px){ .nav__cta{ display:inline-flex; } }

.nav__toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width: 42px; height: 42px; background:none; border: 1px solid #c9d3ea; border-radius: 10px;
  color: var(--navy); padding:0;
}
.nav__toggle svg{ width:18px; height:18px; }
.nav__toggle .icon-close{ display:none; }
.nav__toggle.is-open .icon-open{ display:none; }
.nav__toggle.is-open .icon-close{ display:block; }
@media (min-width: 780px){ .nav__toggle{ display:none; } }

.nav__panel{ display:none; flex-direction: column; gap:2px; padding: 6px 0 22px; background:#fff; }
.nav__panel.is-open{ display:flex; }
.nav__panel a:not(.btn){ padding: 14px 0; color: var(--navy); font-size: 1.05rem; font-weight: 500; border-bottom: 1px solid #e3e8f4; }
.nav__panel .btn{ margin-top: 16px; align-self:flex-start; }
@media (min-width: 780px){ .nav__panel{ display:none !important; } }

/* ==========================================================================
   Hero
   ========================================================================== */
/* Hero scroll-driven: la altura del contenedor marca cuánto scroll dura el vídeo */
.hero{ position:relative; height: 300vh; background: var(--void); }
.hero__stage{ position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: #04163a; }


/* Degradado solo donde hay texto: abajo e izquierda. El vídeo queda limpio arriba. */
.hero__shade{
  position:absolute; inset:0; pointer-events:none;   /* cubre toda la pantalla grande, también bajo la barra del navegador */
  background:
    linear-gradient(to top, rgba(0,6,24,.88) 0%, rgba(0,6,24,.55) 28%, rgba(0,6,24,0) 55%),
    linear-gradient(to right, rgba(0,6,24,.5) 0%, rgba(0,6,24,0) 55%);
}

.hero__beats{ position:absolute; top:0; left:0; right:0; height: 100vh; height: 100svh; height: 100dvh; margin-inline:auto; width:100%; }
.beat{
  position:absolute; left: clamp(20px, 5vw, 48px); right: clamp(20px, 5vw, 48px);
  bottom: clamp(56px, 11vh, 120px);
  margin:0; pointer-events:none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--bone);
  max-width: 16ch;
  text-wrap: balance;
}
.beat--h{ font-size: var(--text-lg); max-width: 18ch; }
/* El bloque final lleva texto corrido y botones: solo el título usa la tipografía display */
.beat--final{ max-width: none; font-family: var(--font); font-size: var(--text-body); font-weight: 300; letter-spacing: normal; line-height: 1.55; }
.beat__title{ font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); line-height: 1; letter-spacing: -0.035em; max-width: 20ch; text-wrap: balance; margin:0; }
.beat.is-active{ pointer-events:auto; }

/* Cada palabra entra con un pequeño retraso; al salir se va sin escalonar */
.beat .w{ display:inline-block; opacity:0; transform: translateY(.45em); filter: blur(6px);
  transition: opacity .25s ease-out, transform .25s ease-out, filter .25s ease-out; }
.beat.is-active .w{ opacity:1; transform:none; filter:none;
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1), filter .6s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i) * 45ms); }

.beat--final .hero__sub, .beat--final .hero__actions{
  opacity:0; transform: translateY(14px);
  transition: opacity .25s ease-out, transform .25s ease-out; }
.beat--final.is-active .hero__sub, .beat--final.is-active .hero__actions{
  opacity:1; transform:none;
  transition: opacity .6s cubic-bezier(.2,.7,.2,1) .35s, transform .6s cubic-bezier(.2,.7,.2,1) .35s; }
.beat--final.is-active .hero__actions{ transition-delay: .45s; }

.hero__sub{ margin-top: 22px; max-width: 40ch; color: #d6dcec; font-size: var(--text-body); font-weight: 300; font-family: var(--font); }
.hero__actions{ margin-top: 32px; display:flex; align-items:center; flex-wrap:wrap; gap: 30px; }

.hero__progress{ position:absolute; left:0; right:0; top: calc(100vh - 2px); top: calc(100svh - 2px); top: calc(100dvh - 2px); height:2px; background: rgba(255,255,255,.12); }
.hero__progress span{ display:block; height:100%; width:100%; background: var(--signal-soft); transform: scaleX(0); transform-origin:left; }

@media (max-width: 760px){
  .hero{ height: 280vh; }
  .hero__shade{ background: linear-gradient(to top, rgba(0,6,24,.92) 0%, rgba(0,6,24,.6) 38%, rgba(0,6,24,0) 65%); }
}

/* Sin animación: se muestra el último fotograma y el mensaje final */
@media (prefers-reduced-motion: reduce){
  .hero{ height: 100svh; }
  .beat:not(.beat--final){ display:none; }
  .beat .w, .beat--final .hero__sub, .beat--final .hero__actions{ opacity:1; transform:none; filter:none; transition:none; }
}

/* ==========================================================================
   Section shell — zigzag two-column, no cards, no shadows
   ========================================================================== */
section[id]{ scroll-margin-top: 72px; }
.section{ padding-block: var(--gap-section); border-top: 1px solid var(--hairline); }

.zigzag{
  display:grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items:center;
}
@media (min-width: 940px){
  .zigzag{ grid-template-columns: 1fr 1fr; gap: 64px; }
  .zigzag--reverse .zigzag__visual{ order: -1; }
}

.zigzag__text h2{ font-size: var(--text-lg); color: var(--bone); max-width: 13ch; }
.zigzag__text p{ margin-top: 22px; max-width: 46ch; color: var(--silver); }

.zigzag__visual{
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(155deg, var(--navy), #000 78%);
  border: 1px solid var(--hairline);
}
.zigzag__visual img, .zigzag__visual video{
  width:100%; height:100%; object-fit: cover;
}
.zigzag__visual .placeholder-label{
  position:absolute; inset:auto 16px 16px auto;
  font-size: var(--text-caption);
  color: var(--ash);
  letter-spacing: .03em;
}

/* ==========================================================================
   Servicios: fondo blanco, acordeón. Al abrir, el ítem se amplía y muestra un vídeo
   ========================================================================== */
.section--light{ background:#fff; color: var(--navy); border-top:0; padding-block: clamp(36px, 4.5vw, 56px); }
.title-blue{ color: var(--signal); font-size: var(--text-lg); }
.section__lead{ margin-top: 14px; color: #5b6784; font-size: var(--text-body); font-weight: 400; }

.services{ margin-top: 28px; border-bottom: 1px solid #dfe5f2; }
.service{ border-top: 1px solid #dfe5f2; transition: background .3s ease; }
.service.is-open{ background: #f3f6ff; }

.service__head{
  width:100%; display:grid; grid-template-columns: 30px minmax(0,1fr) 36px; align-items:center; gap: 12px;
  padding: 30px 12px; background:none; border:0; text-align:left; cursor:pointer;
  font-family: var(--font); color: inherit;
  transition: padding .3s cubic-bezier(.2,.7,.2,1);
}
.service.is-open .service__head{ padding-block: 38px 18px; }
@media (min-width: 760px){ .service__head{ grid-template-columns: 100px minmax(0,1fr) 44px; gap:16px; padding-inline: 24px; } }

.service__index{ color: var(--signal); font-size: var(--text-nav); font-weight: 600; letter-spacing: .04em; }
.service__title{ font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1rem + 3.2vw, 3.7rem); overflow-wrap:break-word; hyphens:auto; line-height: 1.05; letter-spacing: -0.02em; color: var(--navy);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), color .2s ease; transform-origin: left center; }
.service__head:hover .service__title{ color: var(--signal); }
.service.is-open .service__title{ color: var(--signal); }
@media (min-width: 760px){ .service.is-open .service__title{ transform: scale(1.1); } }

.service__icon{ position:relative; width:36px; height:36px; border-radius:50%; border:1px solid #c9d3ea;
  transition: background .25s ease, border-color .25s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.service__icon::before, .service__icon::after{ content:''; position:absolute; left:50%; top:50%; width:12px; height:1.5px; background: var(--signal); transform: translate(-50%,-50%); }
.service__icon::after{ transform: translate(-50%,-50%) rotate(90deg); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.service.is-open .service__icon{ background: var(--signal); border-color: var(--signal); }
.service.is-open .service__icon::before, .service.is-open .service__icon::after{ background:#fff; }
.service.is-open .service__icon::after{ transform: translate(-50%,-50%) rotate(0deg); }
.service__head:focus-visible{ outline: 2px solid var(--signal); outline-offset: -2px; }

.service__panel{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2,.7,.2,1); }
.service.is-open .service__panel{ grid-template-rows: 1fr; }
.service__inner{ overflow:hidden; min-height:0; display:grid; gap: 24px 16px; padding-inline: 12px; }
.service__inner > *{ opacity:0; transform: translateY(10px); transition: opacity .2s ease-out, transform .2s ease-out; }
.service.is-open .service__inner > *{ opacity:1; transform:none; transition: opacity .5s cubic-bezier(.2,.7,.2,1) .15s, transform .5s cubic-bezier(.2,.7,.2,1) .15s; }
.service__inner p{ color:#44506b; max-width: 52ch; font-size: 1.05rem; font-weight: 400; margin:0; }
.service__inner video{ width:100%; max-width: 640px; aspect-ratio: 16/9; object-fit: cover; border-radius: 14px; background: var(--navy); display:block; margin-bottom: 34px; }
@media (min-width: 760px){
  .service__inner{ grid-template-columns: 100px minmax(0,1fr); padding-inline: 24px; }
  .service__inner > *{ grid-column: 2; }
}

/* ==========================================================================
   Proceso: tres pasos unidos por una línea que se dibuja con el scroll
   ========================================================================== */
.process{ list-style:none; margin: 56px 0 0; padding:0; display:grid; gap: 44px; position:relative; }
@media (min-width: 900px){
  .process{ grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .process::before{ content:''; position:absolute; top: 22px; left:0; right:0; height:1px; background: var(--hairline); }
  .process::after{ content:''; position:absolute; top: 22px; left:0; right:0; height:1px; background: var(--signal-soft);
    transform: scaleX(var(--line, 0)); transform-origin:left; }
}
.step{ position:relative; padding-top: 0; }
.step__num{ display:inline-grid; place-items:center; width: 44px; height:44px; border-radius:50%; background: var(--void);
  border: 1px solid var(--signal-soft); color: var(--signal-soft); font-size: var(--text-nav); font-weight:600; position:relative; z-index:1; }
.step__tag{ display:block; margin-top: 26px; font-size: var(--text-caption); text-transform: uppercase; letter-spacing:.08em; color: var(--amber); font-weight:600; }
.step h3{ margin-top: 12px; font-size: var(--text-sm); max-width: 14ch; }
.step p{ margin-top: 16px; color: var(--silver); max-width: 34ch; font-size: 1rem; }

/* ==========================================================================
   Proyectos
   ========================================================================== */
.projects{ display:flex; flex-direction:column; gap: var(--gap-section); margin-top: 30px; }

.project__visual{ position:relative; aspect-ratio: 16/11; border-radius: 22px; overflow:hidden;
  background: linear-gradient(155deg, var(--navy), #000 78%); border: 1px solid var(--hairline);
  transition: transform .4s ease; }
.project__visual::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(160deg, rgba(26,92,240,0.16), transparent 60%);
  opacity: 0; transition: opacity .35s ease;
}
.project:hover .project__visual::after{ opacity:1; }
.project:hover .project__visual{ transform: scale(1.015); }

.project__tag{
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--amber);
  font-weight: 600;
}
.project__text h3{
  margin-top: 14px;
  font-size: var(--text-sm);
  color: var(--bone);
  font-weight: 400;
  transition: color .2s ease;
}
.project__text p{ margin-top: 16px; color: var(--silver); max-width: 46ch; }
.project__link{ margin-top: 24px; }

/* ==========================================================================
   Contacto / CTA
   ========================================================================== */
.contact .zigzag__text h2{ max-width: 15ch; }
.contact__actions{ margin-top: 34px; display:flex; align-items:center; gap: 32px; flex-wrap:wrap; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background:#fff; border-top: 1px solid #e3e8f4; padding-block: 36px; color: var(--navy); }
.footer .wrap{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; }
.footer__brand{ display:flex; align-items:center; gap:14px; }
.footer__brand img{ height: 34px; width:auto; }
.footer small{ color: #55627f; font-size: var(--text-caption); }
.footer__links{ display:flex; flex-wrap: wrap; gap: 16px 26px; }
.footer__links a{ color: #55627f; font-size: 0.88rem; transition: color .2s ease; }
.footer__links a:hover{ color: var(--navy); }

/* ==========================================================================
   Secciones en azul claro (Proceso, Contacto)
   ========================================================================== */
.section--sky{ background:#e7efff; color: var(--navy); border-top:0; padding-block: clamp(36px, 4.5vw, 56px); }
.section--sky h2, .section--sky h3{ color: var(--navy); }
.section--sky .eyebrow, .section--sky .step__tag{ color: var(--signal); }
.section--sky .step p, .section--sky .contact__intro p{ color:#3f4b68; font-weight: 400; }
.section--sky .process::before{ background: rgba(11,24,52,.16); }
.section--sky .process::after{ background: var(--signal); }
.section--sky .step__num{ background:#e7efff; border-color: var(--signal); color: var(--signal); }

/* ==========================================================================
   Contacto + cuestionario
   ========================================================================== */
.contact__grid{ display:grid; grid-template-columns: 1fr; gap: 48px; align-items:start; }
@media (min-width: 940px){ .contact__grid{ grid-template-columns: .9fr 1.1fr; gap: 72px; } }
.contact__intro h2{ font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4rem); max-width: 14ch; text-wrap: balance; }
.contact__intro p{ margin-top: 22px; max-width: 42ch; }
.contact__mail{ display:inline-block; margin-top: 30px; font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  color: var(--signal); border-bottom: 1px solid currentColor; padding-bottom: 3px; overflow-wrap:anywhere; }

.quiz{ background:#fff; border-radius: 22px; padding: clamp(22px, 4vw, 40px); box-shadow: 0 1px 0 rgba(11,24,52,.04), 0 24px 60px -30px rgba(11,24,52,.25); }
.quiz__top{ display:flex; align-items:center; gap: 16px; margin-bottom: 28px; }
.quiz__step{ font-size: var(--text-caption); font-weight: 600; letter-spacing:.06em; text-transform: uppercase; color:#55627f; white-space:nowrap; }
.quiz__bar{ flex:1; height: 4px; border-radius: 4px; background:#e3e8f4; overflow:hidden; }
.quiz__bar span{ display:block; height:100%; width:100%; background: var(--signal); transform: scaleX(.25); transform-origin:left; transition: transform .4s cubic-bezier(.2,.7,.2,1); }

.quiz__panes{ display:grid; }
.quiz fieldset{ grid-area: 1 / 1; border:0; margin:0; padding:0; min-width:0; visibility:hidden; opacity:0; pointer-events:none; }
.quiz fieldset.is-active{ visibility:visible; opacity:1; pointer-events:auto; animation: quizIn .35s cubic-bezier(.2,.7,.2,1); }
@keyframes quizIn{ from{ opacity:0; transform: translateX(14px); } to{ opacity:1; transform:none; } }
.quiz legend{ padding:0; font-family: var(--font-display); font-size: var(--text-sm); line-height:1.1; color: var(--navy); margin-bottom: 8px; }
.quiz__hint{ color:#55627f; font-size: .95rem; margin-bottom: 18px; font-weight:400; }

.chips{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 8px; }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.chip span{ display:inline-block; padding: 12px 18px; border-radius: 999px; border: 1px solid #c9d3ea; color: var(--navy); font-size: .98rem; font-weight:500;
  transition: border-color .2s ease, background .2s ease, color .2s ease; }
.chip:hover span{ border-color: var(--signal); }
.chip input:checked + span{ background: var(--signal); border-color: var(--signal); color:#fff; }
.chip input:focus-visible + span{ outline: 2px solid var(--signal); outline-offset: 2px; }

.field{ display:block; margin-top: 18px; }
.field > span{ display:block; font-size: .92rem; font-weight:600; color: var(--navy); margin-bottom: 8px; }
.field em{ font-style:normal; font-weight:400; color:#6b7792; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field textarea{
  width:100%; font: inherit; font-size: 1rem; font-weight:400; color: var(--navy);
  padding: 13px 14px; border: 1px solid #c9d3ea; border-radius: 12px; background:#fff; transition: border-color .2s ease, box-shadow .2s ease; }
.field textarea{ resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(26,92,240,.15); }
.field.has-error input, .field.has-error textarea{ border-color:#d33; }

.consent{ display:flex; gap:10px; align-items:flex-start; margin-top: 22px; font-size:.92rem; color:#3f4b68; font-weight:400; cursor:pointer; }
.consent input{ margin-top: 4px; accent-color: var(--signal); width:16px; height:16px; flex:none; }

.quiz__error{ margin: 18px 0 0; color:#c22; font-size:.95rem; font-weight:500; }
.quiz__nav{ display:flex; align-items:center; justify-content:space-between; gap: 16px; margin-top: 28px; }
.quiz__back{ background:none; border:0; padding: 10px 4px; font: inherit; font-weight:600; font-size: var(--text-nav); color:#55627f; cursor:pointer; }
.quiz__back:hover{ color: var(--navy); }
.quiz__nav .btn{ margin-left:auto; }
.quiz__done{ animation: quizIn .4s cubic-bezier(.2,.7,.2,1); }
.quiz__done h3{ font-size: var(--text-sm); color: var(--navy); }
.quiz__done p{ margin-top: 14px; color:#3f4b68; font-weight:400; }
.quiz__done a{ color: var(--signal); text-decoration: underline; }
.quiz__done .btn{ margin-top: 24px; }
@media (prefers-reduced-motion: reduce){ .quiz fieldset.is-active, .quiz__done{ animation:none; } }

/* ==========================================================================
   Cuestionario en 3 pasos (cabecera, selects, honeypot)
   ========================================================================== */
.quiz__head{ margin-bottom: 26px; }
.quiz__title{ font-family: var(--font-display); font-weight: 400; font-size: var(--text-sm); line-height: 1.05; color: var(--navy); }
.quiz__sub{ margin-top: 8px; color:#55627f; font-size: .98rem; font-weight:400; }
.quiz__top{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 12px; }
.quiz__label{ font-size: var(--text-caption); font-weight: 700; letter-spacing:.08em; text-transform: uppercase; color: var(--signal); }
.quiz__bar{ margin-bottom: 26px; }
.quiz legend{ font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-bottom: 4px; }
.field select{
  width:100%; font: inherit; font-size: 1rem; font-weight:400; color: var(--navy);
  padding: 13px 40px 13px 14px; border: 1px solid #c9d3ea; border-radius: 12px; background-color:#fff;
  appearance:none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none' stroke='%231a5cf0' stroke-width='1.8'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 14px center; transition: border-color .2s ease, box-shadow .2s ease; }
.field select:invalid{ color:#6b7792; }
.field select option{ color: var(--navy); }
.field select:focus{ outline:none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(26,92,240,.15); }
.field.has-error select{ border-color:#d33; }
.quiz__badge{ font-size: var(--text-caption); font-weight:600; letter-spacing:.06em; text-transform: uppercase; color:#6b7792; margin-left:auto; }
.quiz__nav .btn{ margin-left:0; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* ==========================================================================
   Contacto compacto y simétrico: ambas columnas con la misma altura
   ========================================================================== */
.contact__grid{ align-items: stretch; }
.contact__intro{ display:flex; flex-direction:column; align-items:flex-start; }
.contact__mail{ margin-top:auto; align-self:flex-start; }
.contact__intro p{ margin-bottom: 28px; }

.quiz{ padding: clamp(20px, 2.6vw, 32px); display:flex; flex-direction:column; }
.quiz form{ display:flex; flex-direction:column; flex:1; }
.quiz__head{ margin-bottom: 16px; }
.quiz__title{ font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem); }
.quiz__sub{ margin-top: 4px; font-size: .92rem; }
.quiz__top{ margin-bottom: 8px; }
.quiz__bar{ margin-bottom: 18px; }
.quiz legend{ font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); margin-bottom: 0; }
.row2{ display:grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 640px){ .row2{ grid-template-columns: 1fr 1fr; } }
.field{ margin-top: 12px; }
.field > span{ margin-bottom: 6px; font-size: .88rem; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field select, .field textarea{ padding: 11px 13px; font-size: .96rem; }
.field select{ padding-right: 38px; }
.field textarea{ min-height: 78px; }
.chips{ margin-top: 0; gap: 8px; }
.chip span{ padding: 9px 15px; font-size: .92rem; }
.consent{ margin-top: 14px; font-size: .88rem; }
.quiz__error{ margin-top: 12px; font-size: .9rem; }
.quiz__nav{ margin-top: auto; padding-top: 18px; }
.quiz__done{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.quiz__done[hidden], .quiz__error[hidden], .quiz__back[hidden]{ display:none; }

/* ==========================================================================
   Ajustes: hero final más abajo y subtítulo más ancho, contacto, cuestionario
   ========================================================================== */
.beat--final{ bottom: clamp(24px, 5vh, 56px); }
.beat--final .hero__sub{ max-width: min(64ch, 100%); margin-top: 18px; }
.beat--final .hero__actions{ margin-top: 26px; }

.contact__mail{ margin-bottom: clamp(40px, 9vh, 88px); }

.quiz__step{ color: var(--signal); font-weight: 700; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.quiz__label{ font-size: .8rem; }
.quiz__top{ margin-bottom: 10px; }
.quiz__bar{ margin-bottom: 8px; }

/* ==========================================================================
   Proyectos: menos espacio arriba/abajo y capturas completas en marco blanco
   ========================================================================== */
.section--tight{ padding-block: clamp(36px, 4.5vw, 56px); }
.project__visual--shot{ aspect-ratio: 16 / 9; background:#fff; border-color: rgba(255,255,255,.12); }
.project__visual--shot img{ width:100%; height:100%; object-fit: contain; display:block; }

/* Formulario: el botón principal siempre a la derecha, también en el primer paso */
.quiz__nav .btn{ margin-left: auto; }

/* ==========================================================================
   Proceso: vídeo del búho en el hueco superior derecho
   ========================================================================== */
.process__top{ display:grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.process__video{ margin:0; width: min(100%, 460px); border-radius: 18px; overflow:hidden; background:#eceef2;
  box-shadow: 0 1px 0 rgba(11,24,52,.05), 0 22px 50px -28px rgba(11,24,52,.35); justify-self: start; }
.process__video video{ display:block; width:100%; height:auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 900px){
  .process__top{ grid-template-columns: 1fr auto; gap: 56px; }
  .process__video{ width: clamp(340px, 34vw, 480px); justify-self: end; }
}

/* Marcador de imagen pendiente: discreto y centrado */
.project__visual .placeholder-label{ position:absolute; inset:0; display:grid; place-items:center; padding: 16px; text-align:center;
  font-size: var(--text-caption); letter-spacing:.06em; text-transform: uppercase; color: var(--ash); }

/* Servicios: el texto descriptivo ocupa menos líneas en pantallas anchas */
.service__inner p{ max-width: min(82ch, 100%); }

/* Búho sin fondo: se dibuja directamente sobre el azul de la sección */
.process__owl{ margin:0; justify-self: start; width: clamp(200px, 60vw, 280px); }
.process__owl canvas{ display:block; width:100%; height:auto; filter: drop-shadow(0 18px 16px rgba(11,24,52,.16)); }
@media (min-width: 900px){
  .process__owl{ justify-self: end; width: clamp(240px, 24vw, 340px); }
}

/* La punta del ala que sale del encuadre original se desvanece en vez de cortarse en recto */
.process__owl canvas{ -webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%); mask-image: linear-gradient(to right, #000 90%, transparent 100%); }
@media (min-width: 900px){ .process__owl{ width: clamp(260px, 27vw, 380px); } }

/* La sombra va en el contenedor (fuera de la máscara) para que siga la silueta y no se recorte en rectángulo */
.process__owl{ filter: drop-shadow(0 16px 14px rgba(11,24,52,.16)); }
.process__owl canvas{ filter: none; }

/* Búho algo más pequeño */
.process__owl{ width: clamp(170px, 46vw, 230px); }
@media (min-width: 900px){ .process__owl{ width: clamp(210px, 21vw, 300px); } }

/* Servicios: línea algo más corta, sigue en dos líneas en escritorio */
.service__inner p{ max-width: min(74ch, 100%); }

/* Ajuste fino: frase de Automatizaciones algo más corta y búho algo más pequeño */
.service__inner p{ max-width: min(66ch, 100%); }
.process__owl{ width: clamp(150px, 38vw, 190px); }
@media (min-width: 900px){ .process__owl{ width: clamp(190px, 17.5vw, 250px); } }

/* Capturas de proyectos: marco algo más panorámico; la del SaaS agrícola rellena el marco */
.project__visual--shot{ aspect-ratio: 1.9 / 1; }
.project__visual--cover img{ object-fit: cover; object-position: top center; }

/* SaaS agrícola: el marco tiene la proporción exacta de la captura (sin recortes ni barras) */
.project__visual--cover{ aspect-ratio: 1806 / 871; }
.project__visual--cover img{ object-fit: cover; object-position: center; }

/* ==========================================================================
   Ajustes: espaciado de Proyectos, búho de Proceso y búho de Contacto
   ========================================================================== */
.projects{ gap: clamp(36px, 5vw, 64px); }
#proyectos{ padding-bottom: clamp(72px, 9vw, 120px); }
@media (min-width: 900px){ .process__owl{ margin-right: clamp(32px, 6vw, 96px); } }

/* Búho de Contacto: asoma justo encima del correo y lo señala */
.contact__owl{ margin: auto 0 0; width: clamp(120px, 12vw, 170px); line-height: 0; }
.contact__owl canvas{ display:block; width:100%; height:auto; }
.contact__mail{ margin-top: -2px; margin-bottom: 8px; }

/* La barra de progreso no debe crecer cuando la tarjeta es más alta que su contenido */
.quiz__bar{ flex: 0 0 auto; height: 4px; }

/* Ajustes: menos aire bajo Servicios, búho de Proceso más a la izquierda y búho de Contacto más a la derecha */
@media (min-width: 900px){ .process__owl{ margin-right: clamp(56px, 11vw, 190px); } }
.contact__owl{ margin-left: clamp(36px, 4.5vw, 72px); }

/* Búho de Proceso más a la izquierda; búho de Contacto algo más a la derecha */
@media (min-width: 900px){ .process__owl{ margin-right: clamp(80px, 15vw, 260px); } }
.contact__owl{ margin-left: clamp(60px, 7vw, 112px); }

/* Búho de Proceso: aún más a la izquierda */
@media (min-width: 900px){ .process__owl{ margin-right: clamp(150px, 24vw, 420px); } }

/* ==========================================================================
   Hero: bucle de entrada que se funde con el vídeo de scroll
   ========================================================================== */
.hero__intro{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: center;
  opacity: 0; transition: opacity .7s ease; pointer-events:none; background: #04163a; }
.hero__stage.is-intro .hero__intro{ opacity: 1; }
@media (max-aspect-ratio: 1/1){ .hero__intro{ object-position: 10% 50%; } }   /* mismo encuadre que el canvas en vertical */
@media (prefers-reduced-motion: reduce){ .hero__intro{ display:none; } }

/* Segundo vídeo del hero (bucle): siempre debajo del bucle de entrada */
.hero__loop{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: center; background:#04163a; pointer-events:none; }
@media (max-aspect-ratio: 1/1){ .hero__loop{ object-position: 10% 50%; } }

/* ==========================================================================
   Contacto: ocupa justo la pantalla (sin que asome el pie de página) y escala
   con la altura de la ventana: tamaño completo a partir de ~790 px de alto,
   y algo más compacto por debajo para que siempre quepa entero.
   Solo escritorio; en móvil las dos columnas se apilan y se hace scroll.
   ========================================================================== */
@media (min-width: 940px){
  #contacto{
    min-height: calc(100vh - 72px);
    min-height: calc(100svh - 72px);
    display:flex; align-items:center;
    padding-block: clamp(14px, 3vh, 40px);
  }
  #contacto > .wrap{ width:100%; }
  #contacto .contact__grid{ gap: clamp(32px, 5vw, 72px); }

  /* columna izquierda */
  #contacto .eyebrow{ margin-bottom: clamp(8px, 2.3vh, 18px); }
  #contacto .contact__intro h2{ font-size: clamp(2.6rem, 9.2vh, 4.6rem); max-width: 15ch; }
  #contacto .contact__intro p{ margin-top: clamp(10px, 2.8vh, 22px); margin-bottom: clamp(10px, 3.5vh, 28px); font-size: clamp(1.05rem, 2.6vh, 1.3rem); max-width: 40ch; }
  .contact__owl{ width: clamp(100px, 21.5vh, 170px); }
  .contact__mail{ font-size: clamp(1.1rem, 3.2vh, 1.6rem); margin-bottom: clamp(2px, 1vh, 8px); }

  /* tarjeta del cuestionario */
  .quiz{ padding: clamp(16px, 4vh, 32px) clamp(20px, 2.4vw, 32px); }
  .quiz__head{ margin-bottom: clamp(8px, 2vh, 16px); }
  .quiz__title{ font-size: clamp(1.45rem, 4.45vh, 2.2rem); }
  .quiz__sub{ margin-top: 3px; font-size: clamp(.82rem, 1.86vh, .92rem); }
  .quiz__top{ margin-bottom: clamp(5px, 1.27vh, 10px); }
  .quiz__bar{ margin-bottom: clamp(8px, 2.3vh, 18px); }
  .field{ margin-top: clamp(8px, 1.52vh, 12px); }
  .field > span{ margin-bottom: clamp(4px, .76vh, 6px); font-size: clamp(.82rem, 1.78vh, .88rem); }
  .field input[type=text], .field input[type=email], .field input[type=tel], .field select, .field textarea{
    padding: clamp(8px, 1.39vh, 11px) 13px; font-size: clamp(.9rem, 1.94vh, .96rem); }
  .field textarea{ min-height: clamp(60px, 9.9vh, 78px); }
  .chip span{ padding: clamp(6px, 1.14vh, 9px) 15px; font-size: clamp(.86rem, 1.86vh, .92rem); }
  .consent{ margin-top: clamp(10px, 1.77vh, 14px); font-size: clamp(.82rem, 1.78vh, .88rem); }
  .quiz__nav{ padding-top: clamp(10px, 2.3vh, 18px); }
  .quiz__nav .btn{ padding: clamp(10px, 1.9vh, 15px) 26px; }
}

/* Línea inferior del hero: oculta durante el scroll, visible solo al llegar al final */
.hero__progress{ opacity: 0; transition: opacity .5s ease; }
.hero__progress.is-end{ opacity: 1; }
.hero__progress span{ transition: none; }

/* ==========================================================================
   Hero: los dos primeros textos quedan fijos aunque se esconda la barra del navegador.
   La altura dinámica (dvh) se cancela con la pequeña (svh), así su posición no cambia.
   El texto final sigue el borde visible, como antes.
   ========================================================================== */
.beat:not(.beat--final){ bottom: calc(100dvh - 100svh + clamp(56px, 11vh, 120px)); }

/* ==========================================================================
   Solo móvil: búho y correo de Contacto, y búho de "Cómo trabajamos", centrados
   ========================================================================== */
@media (max-width: 939px){
  .contact__owl{ margin-inline: auto; }
  .contact__mail{ align-self: center; text-align: center; }
}
@media (max-width: 899px){
  .process__owl{ justify-self: center; margin-inline: auto; }
}

/* El texto final del hero también queda fijo (misma cancelación que los dos primeros) */
.beat--final{ bottom: calc(100dvh - 100svh + clamp(24px, 5vh, 56px)); }

/* Solo móvil: menos espacio entre el correo y el formulario */
@media (max-width: 939px){
  #contacto .contact__grid{ gap: 20px; }
  .contact__mail{ margin-bottom: 0; }
}

/* Solo móvil: "Tecnología a tu medida." en una sola línea. El tamaño se calcula con el ancho
   disponible (el texto mide ~9,74 veces su tamaño de fuente), con un pequeño margen. */
@media (max-width: 760px){
  .beat__title{
    white-space: nowrap; max-width: none;
    font-size: min(var(--text-lg), calc((100vw - 2 * clamp(20px, 5vw, 48px)) / var(--title-em, 9.95)));
  }
}

/* Línea inferior del hero: fija en el borde de abajo del escenario (pantalla grande), sin seguir a la barra del navegador */
.hero__progress{ top: auto; bottom: 0; }

/* Proceso: menos espacio entre el búho y el primer paso (Analizar), solo en móvil */
@media (max-width: 899px){ .process{ margin-top: 16px; } }

/* ==========================================================================
   Selector de idioma (icono de globo) a la derecha de la barra superior
   ========================================================================== */
.nav__lang{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height: 40px; min-width: 40px; padding: 0 12px;
  background:#fff; color: var(--navy); border: 1px solid #c9d3ea; border-radius: 999px;
  font: 600 .78rem/1 var(--font); letter-spacing:.04em; cursor:pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.nav__lang svg{ width:18px; height:18px; flex:none; }
.nav__lang:hover{ border-color: var(--signal); color: var(--signal); background:#f3f6ff; }
.nav__lang:focus-visible{ outline: 2px solid var(--signal); outline-offset: 2px; }
@media (max-width: 779px){
  .nav__right{ gap: 10px; }
  .nav__lang{ padding: 0 10px; }
}

/* El título del hero en inglés mide algo más (10,02 em frente a 9,74 em en español) */
html[lang="en"]{ --title-em: 10.25; }

/* ==========================================================================
   Solo ordenador: el selector de idioma pierde el círculo y queda separado de "Hablemos"
   por una barra "|", con el mismo espacio a un lado y al otro
   ========================================================================== */
@media (min-width: 780px){
  .nav__right{ --navgap: clamp(20px, 2.6vw, 40px); gap: var(--navgap); }
  .nav__lang{
    gap: 0; height: 40px; min-width: 0; padding: 0;          /* sin círculo: el borde derecho queda a ras del contenido */
    background: transparent; border: 0; border-radius: 0; color: #55627f;
  }
  .nav__lang::before{                                      /* la barra "|" */
    content:''; flex:none; width:1px; height:22px; background:#c9d3ea;
    margin-right: var(--navgap);                           /* = al hueco entre "Hablemos" y la barra */
  }
  .nav__lang svg{ margin-right: 6px; }
  .nav__lang:hover{ background: transparent; border-color: transparent; color: var(--signal); }
}

/* Solo ordenador: la parte derecha de la barra llega casi hasta el borde de la pantalla.
   El globo queda a la misma distancia del borde que de la barra "|" (--navgap); el logo conserva su alineación. */
@media (min-width: 780px){
  .nav .wrap:first-child{
    max-width: none;
    padding-left: calc(max(0px, (100% - 1280px) / 2) + clamp(20px, 5vw, 48px));   /* el logo sigue alineado con el contenido */
    padding-right: clamp(20px, 2.6vw, 40px);                                       /* = --navgap */
  }
}

/* ==========================================================================
   Proyectos: el fondo negro pasa a ser el bucle del hero (recortado, sin el búho y más lento)
   ========================================================================== */
.section--video{ position:relative; isolation:isolate; background: var(--void); }
.section--video > .wrap{ position:relative; z-index:1; }
.proj-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
/* el vídeo se queda fijo en pantalla mientras se recorre la sección (sticky) */
.proj-bg__stick{ position:sticky; top:0; height:100vh; height:100lvh; overflow:hidden; }
.proj-bg__stick video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; background:#04163a; }
.proj-bg__shade{ position:absolute; inset:0; background:
    linear-gradient(to bottom, rgba(0,6,24,.35), rgba(0,6,24,.55) 40%, rgba(0,6,24,.55) 60%, rgba(0,6,24,.35)); }
@media (prefers-reduced-motion: reduce){ .proj-bg__stick video{ animation:none; } }

/* Sobre el vídeo de fondo, los párrafos de los proyectos algo más claros para que se lean mejor */
.section--video .project__text p{ color: #d6dcec; font-weight: 300; }

/* Proyectos: al pasar el cursor por cualquier parte del bloque de un proyecto, su título se amplía mínimamente
   a la vez que su imagen (misma duración y curva que la imagen). Sin brillo. Solo en dispositivos con cursor. */
.project__text h3{
  transform-origin: left center;
  transition: transform .4s ease;
}
@media (hover: hover){
  .project:hover .project__text h3{ transform: scale(1.025); }
}

/* Proyectos: la línea que aparece bajo "Saber más" al pasar el cursor, en blanco */
.project__link::after{ background: #fff; }

/* ==========================================================================
   Pie de página: enlaces legales; enlace de la casilla de consentimiento
   ========================================================================== */
.footer__legal{ flex-basis:100%; display:flex; flex-wrap:wrap; gap: 8px 22px; padding-top: 18px; margin-top: 4px; border-top: 1px solid #e3e8f4; }
.footer__legal a{ color:#55627f; font-size:.82rem; transition: color .2s ease; }
.footer__legal a:hover{ color: var(--navy); }
.consent a{ color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Páginas legales (aviso legal, privacidad, cookies)
   ========================================================================== */
body.page-legal{ background:#fff; color: var(--navy); }
.legal{ padding-top: 72px; }
.legal__wrap{ max-width: 820px; margin-inline:auto; padding: clamp(40px, 7vw, 80px) clamp(20px, 5vw, 48px) clamp(56px, 8vw, 110px); }
.legal h1{ font-family: var(--font-display); font-weight:400; font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); line-height:1.05; letter-spacing:-.02em; color: var(--navy); }
.legal__meta{ margin-top: 12px; color:#55627f; font-size:.92rem; font-weight:400; }
.legal h2{ font-family: var(--font-display); font-weight:500; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); line-height:1.2; letter-spacing:-.01em; color: var(--navy); margin-top: clamp(30px, 5vw, 44px); }
.legal p, .legal li{ font-size: 1rem; line-height: 1.7; font-weight:400; color:#2d3957; }
.legal p{ margin-top: 12px; }
.legal ul{ margin: 12px 0 0; padding-left: 1.25em; }
.legal li{ margin-top: 6px; }
.legal a{ color: var(--signal); text-decoration: underline; text-underline-offset: 2px; }
.legal__back{ display:inline-flex; align-items:center; gap:8px; margin-bottom: 26px; font-size:.92rem; font-weight:500; text-decoration:none; }
.legal__back:hover{ text-decoration: underline; }
.legal__tablewrap{ overflow-x:auto; margin-top:14px; }
.legal table{ width:100%; border-collapse:collapse; font-size:.94rem; min-width: 520px; }
.legal th, .legal td{ text-align:left; vertical-align:top; padding: 10px 12px; border-bottom: 1px solid #dfe5f2; color:#2d3957; font-weight:400; }
.legal th{ font-weight:600; color: var(--navy); background:#f3f6ff; }
mark.pending{ background:#fff0a8; color:#5a4600; padding: 1px 6px; border-radius: 4px; font-weight:500; }
.legal__draft{ margin-top: 22px; padding: 14px 16px; border:1px solid #f0d97a; background:#fffbe6; border-radius: 12px; font-size:.93rem; color:#5a4600; }
.legal__draft strong{ color:#3d2f00; }
.legal__note-en{ display:none; margin-top: 18px; margin-bottom: 30px; padding: 12px 14px; border-radius: 10px; background:#e7efff; color:#2d3957; font-size:.92rem; }
html[lang="en"] .legal__note-en{ display:block; }
.page-legal .footer{ margin-top: 0; }

/* ==========================================================================
   Solo diseño apilado (móvil y tableta vertical)
   ========================================================================== */
@media (max-width: 939px){
  /* Proyectos: cada imagen va debajo de su bloque de texto, y más pegada a él que al proyecto siguiente */
  .project{ gap: 22px; }
  .project .project__text{ order: 1; }
  .project .project__visual{ order: 2; }
  .projects{ gap: 56px; }

  /* Cuestionario: la tarjeta se ajusta al paso actual y el botón queda justo debajo del último bloque,
     en vez de empujarlo hasta el fondo de una tarjeta tan alta como el paso más largo */
  .quiz__panes{ display: block; }
  .quiz fieldset:not(.is-active){ display: none; }
  .quiz__nav{ margin-top: 0; padding-top: 22px; }
}

/* Hero en móvil: el botón y "Ver servicios" / "See services" se quedan en la misma fila, también en inglés
   (el texto inglés es algo más largo). Si la pantalla es demasiado estrecha, siguen pudiendo pasar a otra línea. */
@media (max-width: 760px){
  .hero__actions{ gap: 14px 16px; }
  .hero__actions .btn{ padding: 13px 20px; font-size: .84rem; white-space: nowrap; }
  .hero__actions .ghost{ font-size: .84rem; white-space: nowrap; }
}
@media (max-width: 380px){
  .hero__actions{ gap: 14px 14px; }
  .hero__actions .btn{ padding: 13px 17px; font-size: .8rem; }
  .hero__actions .ghost{ font-size: .8rem; }
}