/* ============================================================
   OutboundMarkets: hoja de estilo
   Se conserva la paleta del documento de Cristian (tinta azul
   noche, papel hueso, acento ocre) porque funciona: es cálida y
   seria a la vez, y no parece una plantilla. Lo que cambia es el
   RITMO: escala tipográfica, aire entre bloques, jerarquía y
   acabado.
   ============================================================ */

:root{
  /* Paleta original del documento */
  --ink:#1B2A41;
  --ink-soft:#41526B;
  --ink-mute:#6B7B94;
  --paper:#F6F5F0;
  --paper-warm:#FBF9F4;
  --card:#FFFFFF;
  --accent:#C4761B;
  --accent-deep:#9C5B10;
  --accent-soft:#FBF1E3;
  --steel:#3E5C76;
  --line:#E2DFD6;
  --line-strong:#CFCBBF;

  --display:"Bricolage Grotesque","Segoe UI",sans-serif;
  --body:"Albert Sans","Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  /* Escala de espaciado: una sola serie para todo el sitio evita
     los saltos arbitrarios que hacen que una pagina parezca hecha
     a trozos. */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;   --s7:3rem;   --s8:4rem;
  --s9:6rem;   --s10:8rem;

  --ancho:1120px;
  --radio:14px;
  --radio-lg:22px;

  --sombra-sm:0 1px 2px rgba(27,42,65,.06), 0 2px 8px rgba(27,42,65,.04);
  --sombra-md:0 4px 12px rgba(27,42,65,.07), 0 12px 32px rgba(27,42,65,.06);
  --sombra-lg:0 12px 32px rgba(27,42,65,.10), 0 32px 64px rgba(27,42,65,.08);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  /* Que el ancla no quede tapada por la cabecera pegajosa. */
  scroll-padding-top:88px;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* NO se pone overflow-x:hidden. Esconder un desbordamiento hace que
     el contenido desaparezca en silencio en vez de avisar; se prefiere
     que un fallo se vea y se arregle. */
}

img{max-width:100%;height:auto;display:block}

::selection{background:var(--accent);color:#fff}

.contenedor{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--s5)}

/* ── Tipografia ───────────────────────────────────────────── */
h1,h2,h3{font-family:var(--display);letter-spacing:-.022em;line-height:1.1;text-wrap:balance}
h1{font-weight:800;font-size:clamp(2.15rem,5.2vw,3.75rem)}
h2{font-weight:700;font-size:clamp(1.65rem,3.6vw,2.5rem)}
h3{font-weight:700;font-size:1.15rem;letter-spacing:-.012em}

.rotulo{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);
  display:block;
}

.entradilla{font-size:clamp(1.05rem,1.6vw,1.18rem);color:var(--ink-soft);max-width:58ch}

/* ── Botones ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--body);font-weight:600;font-size:.97rem;
  text-decoration:none;padding:.85em 1.5em;border-radius:10px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease;
  /* 48px de alto minimo: por debajo de 44 el dedo falla en movil. */
  min-height:48px;
}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn--principal{background:var(--accent);color:#fff;box-shadow:var(--sombra-sm)}
.btn--principal:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:var(--sombra-md)}
.btn--fantasma{border-color:var(--line-strong);color:var(--ink);background:var(--card)}
.btn--fantasma:hover{border-color:var(--ink);background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn--claro{background:#fff;color:var(--ink)}
.btn--claro:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}
.btn--grande{font-size:1.05rem;padding:1em 1.9em}

/* ── Cabecera ─────────────────────────────────────────────── */
.cabecera{
  position:sticky;top:0;z-index:60;
  background:rgba(246,245,240,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease;
}
.cabecera.pegada{border-bottom-color:var(--line);box-shadow:0 1px 12px rgba(27,42,65,.05)}
.cabecera__interior{
  max-width:var(--ancho);margin-inline:auto;padding:.85rem var(--s5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
}
.marca{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;color:var(--ink);min-width:0}
.marca__nombre{font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:-.02em;white-space:nowrap}
.marca__punto{color:var(--accent)}
.marca__firma{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);white-space:nowrap;
}
.cabecera__acciones{display:flex;align-items:center;gap:var(--s3)}

.idiomas{display:flex;border:1px solid var(--line-strong);border-radius:99px;overflow:hidden;background:var(--card)}
/* 44px de alto minimo en todo lo que se toca con el dedo. Es el minimo que
   recomiendan Apple y Google, y por debajo la gente falla el toque y acaba
   pulsando lo de al lado. Aqui ademas son DOS objetivos pegados (FR y ES), que
   es justo donde mas se nota. */
.idiomas a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;
  padding:.5rem .95rem;text-decoration:none;color:var(--ink-soft);
  transition:background .15s ease,color .15s ease;min-height:44px;display:flex;align-items:center;
}
.idiomas a:hover{background:var(--paper-warm)}
.idiomas a[aria-current]{background:var(--ink);color:#fff}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding-block:var(--s9) var(--s8)}
.hero::before{
  /* Trama de puntos muy tenue: da textura sin competir con el texto. */
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(62,92,118,.13) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 35%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 35%,transparent 78%);
  pointer-events:none;
}
.hero__contenido{position:relative;max-width:min(62ch,100%)}
.hero h1{margin-top:var(--s4);max-width:18ch}
.hero h1 .vuelta{
  color:var(--accent);position:relative;white-space:nowrap;
}
.hero h1 .vuelta::after{
  /* Subrayado dibujado a mano: firma visual sin recargar. */
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;
  background:var(--accent);opacity:.22;border-radius:99px;
}
.hero .entradilla{margin-top:var(--s5)}
.hero__acciones{margin-top:var(--s6);display:flex;gap:var(--s3);flex-wrap:wrap}

.cifras{
  margin-top:var(--s8);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s5);border-top:1px solid var(--line);padding-top:var(--s5);
  position:relative;
}
.cifra strong{
  font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3vw,2rem);
  display:block;color:var(--ink);line-height:1;letter-spacing:-.02em;
}
/* La unidad («ans», «años») necesita aire de verdad: con 0.15em se leia
   «8ans» de un tiron, como si fuera una palabra. */
.cifra strong span{font-size:.52em;font-weight:500;color:var(--ink-mute);margin-left:.32em;letter-spacing:0}
.cifra p{font-size:.87rem;color:var(--ink-soft);margin-top:var(--s2);line-height:1.45}

/* ── Secciones ────────────────────────────────────────────── */
.seccion{padding-block:var(--s8)}
.seccion--papel{background:var(--paper-warm);border-block:1px solid var(--line)}
.seccion__cabeza{max-width:62ch;margin-bottom:var(--s7)}
.seccion__cabeza h2{margin-top:var(--s3)}
.seccion__cabeza p{margin-top:var(--s3);color:var(--ink-soft);font-size:1.03rem}

/* ── Ruta de servicios ────────────────────────────────────── */
.ruta{position:relative;display:grid;gap:var(--s4)}
.parada{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radio);padding:var(--s5) var(--s5) var(--s5) calc(var(--s6) + var(--s5));
  transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;
}
.parada:hover{box-shadow:var(--sombra-md);border-color:var(--line-strong);transform:translateY(-2px)}
.parada__num{
  position:absolute;left:var(--s5);top:var(--s5);
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.82rem;font-weight:500;
  background:var(--accent-soft);color:var(--accent-deep);
  border:1px solid rgba(196,118,27,.28);
}
.parada__etiqueta{
  font-family:var(--mono);font-size:.67rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--steel);display:block;margin-bottom:var(--s2);
}
.parada h3{margin-bottom:var(--s2)}
.parada p{color:var(--ink-soft);font-size:.97rem}

.nota-precio{
  margin-top:var(--s6);padding:var(--s5);border-radius:var(--radio);
  background:var(--accent-soft);border:1px solid rgba(196,118,27,.22);
  border-left:3px solid var(--accent);
  font-size:.98rem;max-width:74ch;
}
.nota-precio strong{color:var(--ink)}

/* ── Sobre mi ─────────────────────────────────────────────── */
.perfil{
  background:var(--ink);color:#E8EDF4;border-radius:var(--radio-lg);
  padding:var(--s7);display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.4fr);
  gap:var(--s7);align-items:center;position:relative;overflow:hidden;
}
.perfil::before{
  content:"";position:absolute;top:-30%;right:-10%;width:60%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(196,118,27,.16),transparent 66%);pointer-events:none;
}
.perfil > *{position:relative}
.perfil h2{color:#fff}
.perfil__foto{
  aspect-ratio:4/5;border-radius:var(--radio);overflow:hidden;
  background:linear-gradient(150deg,#2A3C58,#3E5C76);
  box-shadow:var(--sombra-lg);
}
.perfil__foto img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.perfil__pie{
  margin-top:var(--s3);font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:#8FA3BD;
}
.perfil ul{list-style:none;margin-top:var(--s5)}
.perfil li{
  padding:var(--s4) 0 var(--s4) var(--s6);
  border-bottom:1px solid rgba(255,255,255,.11);
  position:relative;font-size:.97rem;color:#C4CFDD;
}
.perfil li:last-child{border-bottom:none;padding-bottom:0}
.perfil li::before{
  content:"";position:absolute;left:0;top:calc(var(--s4) + .62em);
  width:18px;height:2px;background:var(--accent);border-radius:99px;
}
.perfil li strong{color:#fff;font-weight:600}

/* ── Proceso ──────────────────────────────────────────────── */
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.paso{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radio);
  padding:var(--s5);transition:box-shadow .2s ease,transform .2s ease;
}
.paso:hover{box-shadow:var(--sombra-md);transform:translateY(-2px)}
.paso__num{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;color:var(--accent-deep);
  display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);
}
.paso__num::after{content:"";flex:1;height:1px;background:var(--line)}
.paso h3{margin-bottom:var(--s2)}
.paso p{font-size:.95rem;color:var(--ink-soft)}

/* ── Cierre ───────────────────────────────────────────────── */
.cierre{background:var(--ink);color:#fff;text-align:center;padding-block:var(--s9);position:relative;overflow:hidden}
.cierre::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(196,118,27,.20),transparent 70%);
}
.cierre > *{position:relative}
.cierre h2{color:#fff;max-width:22ch;margin-inline:auto}
.cierre p{margin:var(--s4) auto 0;max-width:52ch;color:#B9C5D6}
.cierre .btn{margin-top:var(--s6)}

/* ── Pie ──────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--line);padding-block:var(--s6);font-size:.85rem;color:var(--ink-soft)}
.pie__interior{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between}
/* El correo del pie y la marca de la cabecera tambien se tocan: se les da
   altura suficiente sin cambiar como se ven. */
.pie a{color:var(--steel);display:inline-flex;align-items:center;min-height:44px;padding-inline:.15em}
.pie a:hover{color:var(--accent-deep)}
.marca{min-height:44px;align-items:center}
.pie__marca{font-family:var(--display);font-weight:700;color:var(--ink)}

/* ── Aparicion al hacer scroll ────────────────────────────────
   OJO: el contenido NO depende de JavaScript para verse. Todo
   nace visible y solo se ANIMA si el navegador confirma que puede
   observar el scroll (clase .js-anima que pone el propio script).
   Al reves, un fallo de JS o un scroll rapido dejan bloques en
   blanco para siempre: es el fallo que se encontro en la otra web
   de Noemie, donde 9 de 16 tarjetas no llegaban a aparecer.
   ──────────────────────────────────────────────────────────── */
.js-anima .anima{opacity:0;transform:translateY(14px)}
.js-anima .anima.visible{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anima .anima{opacity:1;transform:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ── Movil ────────────────────────────────────────────────── */
@media (max-width:900px){
  .perfil{grid-template-columns:1fr;padding:var(--s6);gap:var(--s6)}
  .perfil__foto{max-width:300px}
  .pasos{grid-template-columns:1fr}
}

@media (max-width:680px){
  body{font-size:16px}
  :root{--s8:2.5rem;--s9:3.5rem}
  .hero{padding-block:var(--s7) var(--s7)}
  .hero h1{max-width:none}
  .hero__acciones .btn{width:100%}
  .cifras{grid-template-columns:1fr;gap:var(--s4)}
  .cifra{display:flex;align-items:baseline;gap:var(--s3)}
  .cifra strong{font-size:1.5rem}
  .cifra p{margin-top:0}
  .parada{padding:var(--s5);padding-top:calc(var(--s6) + var(--s4))}
  .parada__num{top:var(--s4);left:var(--s5)}
  .marca__firma{display:none}
  .cabecera__acciones .btn{display:none}
  .cierre .btn,.nota-precio{width:100%}
  .pie__interior{flex-direction:column;text-align:center;gap:var(--s3)}
}