/* ===========================================================================
   Waeihra — landing de la empresa

   Rediseño 2026-08-23 sobre blip.ai/es, la referencia que trajo el usuario.
   De ahi salen tres cosas que eligio explicitamente: el ritmo alternando
   secciones claras y oscuras, la fotografia real de un negocio en el hero, y
   las tarjetas grandes y redondeadas con el mockup del producto adentro.

   Lo que NO se copio: el azul de Blip ni su tipografia. Blip es competencia
   directa de Closer Digital, asi que tomar tambien su paleta convertiria
   esto en la imitacion de un competidor. Se usa el azul propio (#006CCE) y
   la tipografia que el sitio ya tenia.

   El sitio pasa de oscuro parejo a CLARO de base, con dos bandas oscuras que
   marcan el ritmo: las tarjetas de producto (que llevan el color real de
   cada uno) y "como trabajamos". Eso reemplaza al tema claro/oscuro por URL
   que existia antes: ahora la alternancia es parte del diseño, no una
   preferencia del visitante.

   Objetivo de la pagina, que manda sobre todo lo demas: que un negocio con
   un problema escriba. Por eso la accion principal ("Cuentanos tu caso")
   aparece en la barra, en el hero y en el cierre.
=========================================================================== */

:root {
  color-scheme: light;

  /* Claros */
  --papel: #ffffff;
  --hueso: #f4f5f7;
  --tinta: #12151b;

  /* Oscuros, para las bandas del ritmo */
  --noche: #101317;

  --azul: #006cce;
  --azul-hover: #0059aa;
  /* La banda del cierre va un punto mas profunda que el azul de marca. Con
     #006CCE el texto de apoyo caia a 4.25:1 y el correo a 4.03:1, por debajo
     del minimo AA de 4.5 para texto normal; con este pasan a 5.20 y 4.96.
     Medido, no a ojo. */
  --azul-banda: #0060b8;
  --cian: #13c8f1;

  /* Texto sobre claro. Los tres pasan AA sobre --hueso: 12.4 / 6.8 / 5.2:1.
     Los alphas no son los mismos que sobre fondo oscuro — se midieron. */
  --texto-alto: rgba(18, 21, 27, 0.92);
  --texto-medio: rgba(18, 21, 27, 0.74);
  --texto-suave: rgba(18, 21, 27, 0.66);
  --linea: rgba(18, 21, 27, 0.16);
  --linea-fina: rgba(18, 21, 27, 0.09);

  /* Texto sobre oscuro */
  --claro-alto: rgba(255, 255, 255, 0.94);
  --claro-medio: rgba(255, 255, 255, 0.76);
  --claro-suave: rgba(255, 255, 255, 0.58);
  --linea-clara: rgba(255, 255, 255, 0.16);

  /* Identidad de cada producto: son sus colores reales, no una decision de
     esta pagina. */
  --cd-navy: #011f43;
  --cd-teal: #33f4c5;
  --cd-cyan: #1dcdfe;
  --fd-tinta: #101114;
  --fd-volt: #c7f36b;

  --tipo: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --tipo-feedum-titulo: "Sora", var(--tipo);

  /* Escala contenida: la sofisticacion sale del aire, no del tamaño. */
  --t-gigante: clamp(2.1rem, 4.2vw, 3.5rem);
  --t-grande: clamp(1.7rem, 3vw, 2.4rem);
  --t-medio: clamp(1.3rem, 2.1vw, 1.8rem);
  --t-entrada: clamp(1rem, 1.3vw, 1.14rem);
  --t-texto: clamp(.95rem, 1.1vw, 1.02rem);
  --t-etiqueta: 0.7rem;

  --ancho: 1200px;
  --margen: clamp(20px, 5vw, 56px);
  --aire: clamp(56px, 8vh, 104px);
  --radio: 24px;
  --radio-chico: 12px;

  --sal: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto-alto);
  font-family: var(--tipo);
  font-size: var(--t-texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto es obligatorio junto a max-width: las <img> traen atributos
   width/height para reservar espacio, y sin esto la altura se queda clavada
   en el atributo y la imagen sale estirada. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.caja { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.salto-contenido {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--azul); color: #fff; padding: 10px 18px; border-radius: 10px;
  font-weight: 600; transition: top .2s var(--sal);
}
.salto-contenido:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

[data-idioma="en"] .l-es,
[data-idioma="es"] .l-en { display: none; }

/* --------------------------------------------------------- Revelado */
.rev { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--sal), transform .6s var(--sal); }
.rev.visible { opacity: 1; transform: none; }
.rev:nth-child(2) { transition-delay: .06s; }
.rev:nth-child(3) { transition-delay: .12s; }
.rev:nth-child(4) { transition-delay: .18s; }

/* El titular del hero entra palabra por palabra. Solo se activa cuando
   script.js pudo partirlo (.partido); sin JS es texto plano visible. */
[data-palabras].partido .palabra {
  display: inline-block; opacity: 0; transform: translateY(.5em);
  transition: opacity .7s var(--sal), transform .7s var(--sal);
}
[data-palabras].partido.visible .palabra { opacity: 1; transform: none; }

/* --------------------------------------------------------- Barra */
.barra {
  position: sticky; top: 0; z-index: 100; height: 72px; display: flex; align-items: center;
  background: rgba(255,255,255,.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .25s, background .25s;
}
.barra.pegada { border-bottom-color: var(--linea-fina); background: rgba(255,255,255,.96); }
.barra__caja {
  width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.marca { display: flex; align-items: center; gap: 10px; }
.marca__simbolo { width: 26px; }
/* El wordmark es un PNG blanco: sobre la barra clara hay que invertirlo a
   tinta, en vez de mantener un segundo archivo que habria que regenerar cada
   vez que cambie el logo. */
.marca__nombre { height: 15px; width: auto; filter: invert(1) brightness(.12); }

.menu { display: flex; align-items: center; gap: 28px; }
.menu a { font-size: .92rem; font-weight: 500; color: var(--texto-medio); transition: color .18s; }
.menu a:hover { color: var(--azul); }

.barra__derecha { display: flex; align-items: center; gap: 16px; }
.idiomas { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--texto-suave); }
.idiomas button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 4px; }
.idiomas button[aria-pressed="true"] { color: var(--azul); font-weight: 700; }
.hamburguesa { display: none; }

/* --------------------------------------------------------- Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; font-weight: 500; font-size: .94rem;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s var(--sal), border-color .2s var(--sal), color .2s var(--sal), opacity .2s;
}
.boton:active { opacity: .82; }
.boton--solido { background: var(--azul); color: #fff; }
.boton--solido:hover { background: var(--azul-hover); }
/* Para usar encima de la foto del hero y de la banda azul del cierre. */
.boton--claro { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); }
.boton--claro:hover { background: #fff; color: var(--azul); border-color: #fff; }
.boton--menudo { padding: 9px 18px; font-size: .84rem; }

.acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.acciones--centro { justify-content: center; }

.enlace-flecha { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; font-size: .94rem; }
.enlace-flecha__disco {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--linea-clara);
  transition: transform .2s var(--sal), border-color .2s, background .2s;
}
.enlace-flecha:hover .enlace-flecha__disco { transform: translateX(4px); border-color: var(--cd-teal); }
.enlace-flecha--volt:hover .enlace-flecha__disco { border-color: var(--fd-volt); }

/* --------------------------------------------------------- Tipografia */
.etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-etiqueta); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-suave); margin: 0;
}
.etiqueta--claro { color: var(--claro-suave); }
.etiqueta--centro { display: flex; justify-content: center; }

.titular-gigante { font-size: var(--t-gigante); font-weight: 600; line-height: 1.14; letter-spacing: -.022em; margin: 0; }
.titular-grande { font-size: var(--t-grande); font-weight: 600; line-height: 1.2; letter-spacing: -.018em; margin: 0; }
.titular-medio { font-size: var(--t-medio); font-weight: 600; line-height: 1.26; margin: 0; }
/* La frase en color dentro del titular — el recurso que Blip usa para
   marcar el remate de la idea. */
.titular-gigante em, .titular-grande em, .titular-medio em { font-style: normal; color: var(--azul); }

.entrada { font-size: var(--t-entrada); color: var(--texto-medio); line-height: 1.6; margin: 0; max-width: 52ch; }
.entrada--centro { margin-inline: auto; text-align: center; }
.parrafo { font-size: var(--t-texto); color: var(--texto-medio); margin: 0; max-width: 56ch; }

/* --------------------------------------------------------- 01 Hero */
.hero {
  position: relative; isolation: isolate;
  min-height: min(78vh, 640px);
  display: flex; align-items: flex-end;
  padding-block: clamp(80px, 14vh, 150px) clamp(44px, 7vh, 76px);
}
.hero__foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* Velo oscuro sobre la foto: sin el, el texto blanco no se sostiene sobre
   las zonas claras de la imagen. Es mas fuerte a la izquierda, que es donde
   cae el titular. */
.hero__velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8,10,14,.92) 0%, rgba(8,10,14,.78) 45%, rgba(8,10,14,.55) 100%);
}
.hero__caja { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: end; }
.hero__caja > * { min-width: 0; }
.hero .titular-gigante { color: #fff; max-width: 16ch; }
.hero__lado { display: flex; flex-direction: column; gap: 22px; padding-bottom: 6px; }
.hero__bajada { color: var(--claro-medio); font-size: var(--t-entrada); line-height: 1.6; margin: 0; }

/* --------------------------------------------------------- 02 Credenciales */
.credenciales { background: var(--hueso); padding-block: var(--aire); }
.credenciales__lista {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px);
}
.credenciales__lista li { border-top: 2px solid var(--azul); padding-top: 16px; }
.credenciales__marca {
  display: block; font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--azul); margin-bottom: 8px;
}
.credenciales__lista p { margin: 0; color: var(--texto-medio); font-size: .96rem; line-height: 1.5; }

/* --------------------------------------------------------- 03 La idea */
.idea { padding-block: var(--aire); }
.idea__caja { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.idea .titular-grande { max-width: 22ch; }

/* --------------------------------------------------------- 04 Productos
   El patron de tarjeta de Blip. Cada una lleva el color real de su producto,
   asi que el contraste claro/oscuro de la pagina sale de la marca. */
.productos { padding-block: 0 var(--aire); }
.productos .etiqueta { margin-bottom: 20px; }

.tarjeta {
  display: grid; grid-template-columns: .82fr 1.18fr; align-items: center;
  gap: clamp(24px, 4vw, 56px);
  border-radius: var(--radio);
  padding: clamp(28px, 4vw, 52px);
  overflow: hidden;
}
.tarjeta + .tarjeta { margin-top: 20px; }
.tarjeta > * { min-width: 0; }
.tarjeta__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.tarjeta__marca { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.tarjeta__logo { height: 26px; width: auto; }
.tarjeta__parrafo { margin: 0; font-size: .98rem; line-height: 1.6; max-width: 42ch; }
.tarjeta .titular-medio { color: #fff; }
.tarjeta .enlace-flecha { color: #fff; margin-top: 4px; }

/* La captura se apoya sobre el color de la tarjeta con un borde de 1px y sin
   sombra: la tarjeta ya es el contenedor, otra sombra encima deja doble
   contorno. */
.tarjeta__pantalla img {
  border-radius: var(--radio-chico);
  border: 1px solid rgba(255,255,255,.14);
}

.tarjeta--closer { background: var(--cd-navy); }
.tarjeta--closer .tarjeta__marca { color: var(--cd-cyan); }
.tarjeta--closer .tarjeta__parrafo { color: var(--claro-medio); }

.tarjeta--feedum { background: var(--fd-tinta); }
.tarjeta--feedum .titular-medio { font-family: var(--tipo-feedum-titulo); }
/* Regla heredada del producto: el volt nunca es color de texto sobre claro.
   Aca el fondo es la tinta de Feedum, asi que si va. */
.tarjeta--feedum .titular-medio em { color: var(--fd-volt); }
.tarjeta--feedum .tarjeta__parrafo { color: var(--claro-medio); }

/* --------------------------------------------------------- 05 Metodo */
.metodo { background: var(--noche); color: var(--claro-alto); padding-block: var(--aire); }
.metodo .titular-grande { color: #fff; margin-top: 12px; max-width: 18ch; }
.pasos {
  list-style: none; margin: clamp(32px, 5vw, 52px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 36px);
}
.paso { border-top: 1px solid var(--linea-clara); padding-top: 18px; }
.paso__numero { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; color: var(--cian); margin-bottom: 10px; }
.paso h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; color: #fff; }
.paso p { font-size: .92rem; color: var(--claro-medio); margin: 0; }

/* --------------------------------------------------------- 06 Nosotros */
.nosotros { padding-block: var(--aire); }
.nosotros__caja { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.nosotros__caja > * { min-width: 0; }
.nosotros__foto img { border-radius: var(--radio); }
.nosotros__texto { display: flex; flex-direction: column; gap: 16px; }

/* --------------------------------------------------------- 07 Cierre
   La banda de CTA a todo el ancho de Blip, con el azul de Waeihra. */
.cierre { background: var(--azul-banda); color: #fff; padding-block: clamp(56px, 9vh, 110px); }
.cierre__caja { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.cierre .titular-grande { color: #fff; max-width: 20ch; }
.cierre__bajada { color: rgba(255,255,255,.88); font-size: var(--t-entrada); margin: 0; max-width: 46ch; }
.cierre__correo { color: rgba(255,255,255,.85); font-size: .94rem; text-decoration: underline; text-underline-offset: 4px; }
.cierre__correo:hover { color: #fff; }

/* --------------------------------------------------------- 08 Pie */
.pie { background: var(--hueso); padding-top: var(--aire); }
.pie__caja { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 32px; padding-bottom: 40px; }
.pie__nombre { font-weight: 600; font-size: 1rem; margin: 0 0 8px; }
.pie__lema, .pie__meta { color: var(--texto-suave); font-size: .88rem; margin: 4px 0 0; max-width: 34ch; }
.pie__redes { list-style: none; display: flex; gap: 10px; margin: 18px 0 0; padding: 0; }
.pie__redes a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: center; color: var(--texto-medio);
  transition: border-color .2s, color .2s;
}
.pie__redes a:hover { border-color: var(--azul); color: var(--azul); }
.pie__redes svg { width: 17px; height: 17px; }
.pie__columna { display: flex; flex-direction: column; gap: 10px; }
.pie__columna a, .pie__idioma {
  color: var(--texto-medio); font-size: .92rem; background: none; border: 0;
  text-align: left; padding: 0; cursor: pointer; font-family: inherit;
}
.pie__columna a:hover, .pie__idioma:hover { color: var(--azul); }
.pie__fondo {
  display: flex; justify-content: space-between; padding-block: 20px;
  border-top: 1px solid var(--linea-fina); font-size: .82rem; color: var(--texto-suave);
}

/* --------------------------------------------------------- Paginas legales
   privacidad / terminos / cookies / accesibilidad. Comparten esta hoja con
   la landing para no mantener dos sistemas. Columna angosta y numeracion
   discreta: es texto para consultar, no para recorrer. */
.legal { padding-block: clamp(40px, 7vh, 72px) var(--aire); }
.legal__caja { max-width: 760px; }
.legal .titular-grande { margin: 10px 0 0; }
.legal__aviso {
  margin: 14px 0 0; font-size: .88rem; color: var(--texto-suave);
  border-left: 2px solid var(--linea); padding-left: 12px;
}
.legal__meta { font-size: .88rem; color: var(--texto-suave); }
.legal__cuerpo { margin-top: clamp(28px, 4vw, 44px); }
.legal__cuerpo h2 {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 1.02rem; font-weight: 600; letter-spacing: .01em;
  margin: 34px 0 10px; padding-top: 18px; border-top: 1px solid var(--linea-fina);
}
.legal__cuerpo h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.legal__n { flex: none; font-size: .74rem; font-weight: 600; color: var(--azul); letter-spacing: .08em; }
.legal__cuerpo p { margin: 0 0 12px; color: var(--texto-medio); }
.legal__cuerpo ul { margin: 0 0 12px; padding-left: 20px; color: var(--texto-medio); }
.legal__cuerpo li { margin-bottom: 5px; }
.legal__cuerpo a { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }

.legal__otras {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  margin-top: clamp(36px, 5vw, 56px); padding-top: 22px; border-top: 1px solid var(--linea);
  font-size: .92rem;
}
.legal__otras a { color: var(--texto-medio); }
.legal__otras a:hover { color: var(--azul); }

/* --------------------------------------------------------- Responsive */
@media (max-width: 980px) {
  /* En la landing el CTA de la barra se esconde en movil porque su lugar lo
     toma la hamburguesa. Las paginas legales no tienen menu, asi que ahi el
     boton de volver es la unica salida y tiene que quedarse. */
  .barra__derecha .boton--menudo { display: none; }
  .legal-pagina .barra__derecha .boton--menudo { display: inline-flex; }
  .menu {
    position: fixed; inset: 72px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0; margin: 0;
    padding: 8px var(--margen) 20px;
    background: var(--papel); border-bottom: 1px solid var(--linea);
    font-size: 1.05rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .25s linear, transform .3s var(--sal);
  }
  .menu.abierto { opacity: 1; transform: none; pointer-events: auto; }
  .menu a { width: 100%; padding: 13px 0; border-bottom: 1px solid var(--linea-fina); }
  .hamburguesa {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; background: none; border: 1px solid var(--linea);
    border-radius: 10px; cursor: pointer;
  }
  .hamburguesa span { display: block; width: 16px; height: 1.5px; background: var(--tinta); margin-inline: auto; }

  .hero__caja { grid-template-columns: 1fr; align-items: start; }
  .hero .titular-gigante { max-width: 20ch; }
  /* Sin la columna derecha el velo puede ser parejo. */
  .hero__velo { background: linear-gradient(180deg, rgba(8,10,14,.7) 0%, rgba(8,10,14,.9) 100%); }

  .credenciales__lista { grid-template-columns: 1fr; gap: 20px; }
  .tarjeta, .nosotros__caja { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .pie__caja { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .pasos { grid-template-columns: 1fr; }
  .pie__caja { grid-template-columns: 1fr; }
  .pie__fondo { flex-direction: column; gap: 8px; }
  .acciones .boton { width: 100%; }
}