/* ═══════════════════════════════════════════════════════════════════════════
   Rangel & Asociados Consultores S.A.S — hoja de estilo del sitio
   ---------------------------------------------------------------------------
   Paleta tomada del LOGO, no inventada: marino #08111E, bronce #9A7946,
   brillo #EEDDBD y crema #FBF8EE (medidos sobre el archivo original).

   El sitio tiene DOS temas. El claro es el de por defecto; el oscuro entra solo
   si el sistema lo pide o si la persona lo elige con el boton del encabezado
   (queda guardado en el navegador). Las secciones que ya son marinas —portada,
   servicios, cinta y pie— se ven igual en los dos: lo que cambia es el resto.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* marca */
  --marino:      #0A1626;
  --marino-2:    #0E1E33;
  --marino-3:    #16283F;
  --oro:         #BE9A54;
  --oro-claro:   #D9BC78;
  --oro-brillo:  #EEDDBD;
  --oro-tinta:   #7A5C27;   /* el bronce legible SOBRE fondo claro */
  --crema:       #F6F1E7;
  --crema-2:     #FBF8F2;

  /* superficies y texto (tema claro) */
  --fondo:       #FFFFFF;
  --fondo-2:     var(--crema-2);
  --fondo-3:     var(--crema);
  --tinta:       #101A27;
  --tinta-2:     #4D5968;
  --borde:       #E4DED1;
  --rotulo:      var(--oro-tinta);
  --sombra:      0 1px 2px rgb(10 22 38 / .04), 0 12px 32px -12px rgb(10 22 38 / .14);
  --sombra-alta: 0 2px 4px rgb(10 22 38 / .06), 0 28px 60px -20px rgb(10 22 38 / .26);

  /* sobre fondo marino (vale en los dos temas) */
  --sobre-oscuro:   #ECE7DC;
  --sobre-oscuro-2: #A7B3C4;
  --borde-oscuro:   rgb(190 154 84 / .22);
  /* fondo de las secciones que SIEMPRE son marinas. En el tema oscuro sube un tono:
     si no, quedan del mismo color que el resto y la pagina se vuelve un bloque sin
     principio ni fin. */
  --panel-oscuro:   var(--marino);

  /* la barra de arriba CUANDO ESTA FIJA (suelta sobre la portada es transparente) */
  --barra-fondo:  rgb(252 250 246 / .92);
  --barra-panel:  #FCFAF6;
  --barra-texto:  #101A27;
  --barra-acento: var(--oro-tinta);
  --barra-borde:  rgb(10 22 38 / .12);

  /* tipografia */
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* medidas */
  --ancho:   1200px;
  --margen:  clamp(20px, 5vw, 48px);
  --radio:   14px;
  --radio-s: 10px;
  --barra:   76px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo:   #0A1626;
    --fondo-2: #0C1B2D;
    --fondo-3: #0E1E33;
    --tinta:   #ECE7DC;
    --tinta-2: #A7B3C4;
    --borde:   rgb(190 154 84 / .20);
    --rotulo:  var(--oro-claro);
    --sombra:      0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -12px rgb(0 0 0 / .6);
    --sombra-alta: 0 2px 4px rgb(0 0 0 / .5), 0 28px 60px -20px rgb(0 0 0 / .7);
    --panel-oscuro: #122237;

    --barra-fondo:  rgb(10 22 38 / .9);
    --barra-panel:  #0A1626;
    --barra-texto:  var(--sobre-oscuro);
    --barra-acento: var(--oro-claro);
    --barra-borde:  var(--borde-oscuro);
  }
}

:root[data-tema="oscuro"] {
  --fondo:   #0A1626;
  --fondo-2: #0C1B2D;
  --fondo-3: #0E1E33;
  --tinta:   #ECE7DC;
  --tinta-2: #A7B3C4;
  --borde:   rgb(190 154 84 / .20);
  --rotulo:  var(--oro-claro);
  --sombra:      0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -12px rgb(0 0 0 / .6);
  --sombra-alta: 0 2px 4px rgb(0 0 0 / .5), 0 28px 60px -20px rgb(0 0 0 / .7);
  --panel-oscuro: #122237;

  --barra-fondo:  rgb(10 22 38 / .9);
  --barra-panel:  #0A1626;
  --barra-texto:  var(--sobre-oscuro);
  --barra-acento: var(--oro-claro);
  --barra-borde:  var(--borde-oscuro);
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 12px); }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: clamp(15.5px, .35vw + 14.8px, 17px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.3rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
h3 { font-size: clamp(1.15rem, 1.3vw, 1.35rem); }
h1 em { font-style: italic; color: var(--oro-claro); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--oro); color: var(--marino); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--oro-claro);
  outline-offset: 3px;
  border-radius: 4px;
}

.contenedor {
  width: min(100% - var(--margen) * 2, var(--ancho));
  margin-inline: auto;
}

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--oro); color: var(--marino);
  padding: 12px 20px; font-weight: 600; border-radius: 0 0 var(--radio-s) 0;
}
.saltar:focus { left: 0; }

/* variantes de imagen segun el tema: el disco crema va sobre marino y
   el disco marino va sobre fondo claro — siempre el que contrasta */
.solo-claro  { display: block; }
.solo-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .solo-claro  { display: none; }
  :root:not([data-tema="claro"]) .solo-oscuro { display: block; }
}
:root[data-tema="oscuro"] .solo-claro  { display: none; }
:root[data-tema="oscuro"] .solo-oscuro { display: block; }
:root[data-tema="claro"]  .solo-claro  { display: block; }
:root[data-tema="claro"]  .solo-oscuro { display: none; }

/* ─────────────────────────────────────────────────────────── rotulos */
.rotulo {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--rotulo);
  margin: 0 0 1rem;
  display: flex; align-items: center; gap: .7rem;
}
.rotulo::before {
  content: ''; width: 34px; height: 1px; flex: none;
  background: currentColor; opacity: .55;
}
.rotulo--oro { color: var(--oro-claro); }
.seccion__titulo .rotulo { justify-content: center; }
.seccion__titulo .rotulo::after {
  content: ''; width: 34px; height: 1px; background: currentColor; opacity: .55;
}

/* ────────────────────────────────────────────────────────── botones */
/* ⚠️ Las variables del boton se llaman `--bt-*` y NO `--b-*`: la barra de arriba
   usa `--b-texto` para su propio color y un boton vive dentro de ella. Dos cosas
   distintas con el mismo nombre terminan en un color donde no va. */
.boton {
  --bt-fondo: var(--oro);
  --bt-texto: #14202F;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.6rem;
  background: var(--bt-fondo);
  color: var(--bt-texto);
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 .93rem/1 var(--sans);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease,
              border-color .18s ease, color .18s ease;
}

/* Dorado MATE y plano. Antes era un degradado de tres tonos con un resplandor
   dorado detras: sobre el azul de la portada eso se veia de plantilla barata.
   La sombra ahora es neutra —oscurece, no brilla— y el relieve lo da el hover. */
.boton--oro {
  background: var(--oro);
  box-shadow: 0 1px 2px rgb(10 22 38 / .28);
}
.boton--oro:hover {
  background: var(--oro-claro);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgb(10 22 38 / .7);
}

/* Contorno dorado: el llamado de la BARRA DE ARRIBA. Antes era solido igual que
   el de la portada y los dos competian en la misma pantalla, diciendo ademas lo
   mismo. Un solo boton solido por pantalla. Toma el acento de la barra, asi que
   se adapta cuando la barra se vuelve clara. */
.boton--borde {
  background: transparent;
  color: var(--b-acento, var(--oro-claro));
  border-color: color-mix(in srgb, currentColor 42%, transparent);
}
.boton--borde:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-color: currentColor;
  transform: translateY(-1px);
}

/* `color: inherit` y no un crema fijo: este boton tambien vive en la barra de la
   pagina de aviso, que en tema claro es crema — con el color escrito a mano
   quedaba crema sobre crema, invisible. */
.boton--linea {
  background: transparent;
  color: inherit;
  border-color: color-mix(in srgb, currentColor 32%, transparent);
}
.boton--linea:hover {
  border-color: currentColor;
  color: var(--b-acento, var(--oro-brillo));
  transform: translateY(-1px);
}
.boton--grande { padding: 1rem 2rem; font-size: 1rem; }
.boton--bloque { width: 100%; }

/* ─────────────────────────────────────────────────────────── cabecera */
/* La barra tiene DOS estados y en cada uno manda algo distinto:
   · suelta sobre la portada -> es transparente y debajo siempre hay marino, asi
     que su contenido va claro, sin importar el tema;
   · fija al hacer scroll -> ahi si sigue el TEMA: crema en claro, marino en oscuro.
   Por eso el color del contenido sale de `--b-texto`, que se redefine al fijarse,
   y no de un color puesto a mano en cada elemento. */
.cabecera {
  --b-texto: var(--sobre-oscuro);
  --b-acento: var(--oro-claro);
  color: var(--b-texto);
  position: fixed; inset: 0 0 auto; z-index: 90;
  height: var(--barra);
  display: flex; align-items: center;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.cabecera--fija {
  --b-texto: var(--barra-texto);
  --b-acento: var(--barra-acento);
  background: var(--barra-fondo);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--barra-borde);
  box-shadow: 0 10px 30px -18px rgb(10 22 38 / .35);
}
.cabecera__caja {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
}

.cabecera__acciones { display: flex; align-items: center; gap: .55rem; }

.marca { display: flex; align-items: center; gap: .78rem; text-decoration: none; }
.marca picture { flex: none; }
/* el escudo es mas alto que ancho (560x668): se fija el ALTO y el ancho sale solo */
.marca__sello {
  height: 46px; width: auto; flex: none;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.marca:hover .marca__sello { transform: scale(1.07); }
.marca__texto { display: grid; line-height: 1.1; }
.marca__texto strong {
  font-family: var(--serif);
  font-size: 1.22rem; font-weight: 700;
  letter-spacing: .15em;
  color: var(--b-texto);
}
.marca__texto small {
  font-size: .62rem; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--b-acento);
}

/* `margin-left: auto` y no `space-between` en el contenedor: asi el menu viaja
   pegado al boton de tema y no queda un hueco raro entre los dos en pantallas anchas */
.menu { display: flex; align-items: center; gap: clamp(.9rem, 1.7vw, 1.9rem); margin-left: auto; }
.menu > a:not(.boton) {
  position: relative;
  font-size: .9rem; font-weight: 500;
  color: var(--b-texto);
  text-decoration: none;
  padding: .3rem 0;
  transition: color .2s ease;
}
.menu > a:not(.boton)::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: var(--b-acento);
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.menu > a:not(.boton):hover,
.menu > a:not(.boton).activo { color: var(--b-acento); }
.menu > a:not(.boton):hover::after,
.menu > a:not(.boton).activo::after { transform: scaleX(1); transform-origin: left; }
.menu__cta { padding: .62rem 1.25rem; font-size: .86rem; }

.tema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  background: color-mix(in srgb, currentColor 9%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 50%;
  color: var(--b-texto);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.tema:hover { color: var(--b-acento); transform: rotate(-15deg); }
.tema .tema__luna { display: none; }
:root[data-tema="oscuro"] .tema .tema__luna { display: block; }
:root[data-tema="oscuro"] .tema .tema__sol  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema .tema__luna { display: block; }
  :root:not([data-tema="claro"]) .tema .tema__sol  { display: none; }
}

.hamburguesa {
  display: none;
  width: 42px; height: 42px; padding: 10px;
  flex-direction: column; justify-content: space-between;
  background: none; border: 0; cursor: pointer;
}
.hamburguesa span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--b-texto);
  transition: transform .3s ease, opacity .25s ease;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ────────────────────────────────────────────────────────────── hero */
.hero {
  position: relative;
  min-height: min(100svh, 920px);
  display: flex; align-items: center;
  padding: calc(var(--barra) + clamp(48px, 7vw, 96px)) 0 clamp(56px, 7vw, 104px);
  background: var(--marino);
  color: var(--sobre-oscuro);
  overflow: hidden;
  isolation: isolate;
}
.hero__fondo {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(90% 65% at 78% 8%, rgb(190 154 84 / .20), transparent 60%),
    radial-gradient(60% 50% at 8% 95%, rgb(36 80 143 / .22), transparent 65%),
    linear-gradient(165deg, #0C1B2E 0%, var(--marino) 48%, #07101C 100%);
}
/* retícula fina, como el papel de un balance */
.hero__fondo::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(190 154 84 / .055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(190 154 84 / .055) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(75% 75% at 50% 42%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 75% at 50% 42%, #000 20%, transparent 100%);
}
.hero__sello {
  position: absolute; z-index: -1;
  right: -7%; top: 50%;
  transform: translateY(-48%);
  width: min(48vw, 540px);
  opacity: .05;
  pointer-events: none;
}
.hero__caja {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.hero__bajada {
  font-size: clamp(1.02rem, 1.1vw, 1.16rem);
  color: var(--sobre-oscuro-2);
  max-width: 54ch;
  margin-bottom: 2.1rem;
}
.hero h1 { margin-bottom: 1.1rem; color: #FFFDF8; }
.hero__botones { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.4rem; }
.hero__pie {
  display: flex; align-items: center; gap: .6rem;
  margin: 0;
  font-size: .86rem; letter-spacing: .04em;
  color: var(--sobre-oscuro-2);
}
.punto {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #46D18B;
  box-shadow: 0 0 0 4px rgb(70 209 139 / .18);
}

.hero__tarjeta {
  display: grid; justify-items: center; gap: 1.4rem;
  padding: clamp(1.8rem, 2.6vw, 2.6rem);
  background: linear-gradient(170deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02));
  border: 1px solid var(--borde-oscuro);
  border-radius: calc(var(--radio) + 8px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / .85);
}
.hero__tarjeta > img, .hero__tarjeta picture img {
  width: clamp(190px, 20vw, 250px);
  filter: drop-shadow(0 16px 34px rgb(0 0 0 / .5));
}
.hero__datos { display: grid; gap: .9rem; width: 100%; }
.hero__datos li {
  display: grid; gap: .15rem;
  padding-top: .9rem;
  border-top: 1px solid var(--borde-oscuro);
}
.hero__datos li:first-child { border-top: 0; padding-top: 0; }
.hero__datos strong {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro-claro);
}
.hero__datos span { font-size: .93rem; color: var(--sobre-oscuro); }
.hero__wa {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .88rem; font-weight: 600;
  color: var(--sobre-oscuro);
  text-decoration: none;
  transition: color .2s ease;
}
.hero__wa:hover { color: #5BD07A; }

/* ──────────────────────────────────────────────── tira de especialidades */
.tira {
  background: var(--marino-2);
  border-block: 1px solid var(--borde-oscuro);
  overflow: hidden;
  padding: .95rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.tira__pista {
  display: flex; align-items: center; gap: 1.7rem;
  width: max-content;
  animation: correr 46s linear infinite;
}
.tira__pista span {
  font-size: .8rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--sobre-oscuro-2);
  white-space: nowrap;
}
.tira__pista i {
  width: 5px; height: 5px; flex: none;
  background: var(--oro); transform: rotate(45deg);
}
.tira:hover .tira__pista { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }

/* ───────────────────────────────────────────────────────── secciones */
.seccion { padding: clamp(68px, 9vw, 128px) 0; background: var(--fondo); }
.seccion--crema { background: var(--fondo-2); }
.seccion--oscura {
  background: var(--panel-oscuro);
  color: var(--sobre-oscuro);
  position: relative;
  overflow: hidden;
}
.seccion--oscura h2, .seccion--oscura h3 { color: #FFFDF8; }

.seccion__titulo { text-align: center; max-width: 62ch; margin: 0 auto clamp(2.8rem, 4vw, 4rem); }
.seccion__bajada {
  color: var(--tinta-2);
  font-size: 1.04rem;
  margin: 0;
}
.seccion--oscura .seccion__bajada { color: var(--sobre-oscuro-2); }

.rejilla-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}

/* ───────────────────────────────────────────────────────── la firma */
.firma__texto h2 { margin-bottom: 1.3rem; }
.firma__texto p { color: var(--tinta-2); max-width: 58ch; }
.firma__texto p strong { color: var(--tinta); font-weight: 600; }
.firma__notas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.4rem; margin-top: 2.2rem;
  padding-top: 2rem; border-top: 1px solid var(--borde);
}
.firma__notas strong {
  display: block; font-family: var(--serif); font-size: 1.08rem; font-weight: 600;
  color: var(--tinta); margin-bottom: .3rem;
}
.firma__notas p { font-size: .91rem; margin: 0; color: var(--tinta-2); }

.firma__sello { margin: 0; display: grid; justify-items: center; gap: 1.2rem; }
.firma__sello picture { width: min(84%, 420px); }
.firma__sello img {
  width: 100%;
  filter: drop-shadow(0 30px 60px rgb(10 22 38 / .28));
  animation: flotar 7s ease-in-out infinite;
}
.firma__sello figcaption {
  font-size: .76rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--rotulo);
}
@keyframes flotar { 50% { transform: translateY(-13px); } }

/* ──────────────────────────────────────────────────────── servicios */
.servicios::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 85% 0%, rgb(190 154 84 / .11), transparent 62%);
  pointer-events: none;
}
.servicios .contenedor { position: relative; }

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.3rem;
}
.tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  padding: 2rem 1.8rem 1.9rem;
  background: linear-gradient(165deg, rgb(255 255 255 / .055), rgb(255 255 255 / .018));
  border: 1px solid var(--borde-oscuro);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease,
              box-shadow .3s ease, background .3s ease;
}
.tarjeta::before {
  content: ''; position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--oro-claro), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.tarjeta:hover {
  transform: translateY(-6px);
  border-color: rgb(190 154 84 / .5);
  background: linear-gradient(165deg, rgb(255 255 255 / .085), rgb(255 255 255 / .03));
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .9);
}
.tarjeta:hover::before { transform: scaleX(1); }
.tarjeta__num {
  font-family: var(--serif);
  font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgb(190 154 84 / .55);
  margin-bottom: .9rem;
  transition: color .3s ease;
}
.tarjeta:hover .tarjeta__num { color: rgb(190 154 84 / .22); }
.tarjeta h3 { margin-bottom: .6rem; }
.tarjeta > p { color: var(--sobre-oscuro-2); font-size: .95rem; margin-bottom: 1.2rem; }
.tarjeta ul {
  display: grid; gap: .5rem;
  margin-top: auto; padding-top: 1.1rem;
  border-top: 1px solid var(--borde-oscuro);
}
.tarjeta li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .88rem;
  color: var(--sobre-oscuro);
}
.tarjeta li::before {
  content: ''; position: absolute; left: 0; top: .54em;
  width: 5px; height: 5px; background: var(--oro); transform: rotate(45deg);
}
.tarjeta--ancha { grid-column: 1 / -1; }
.tarjeta--ancha ul { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.servicios__pie {
  margin: 2.6rem 0 0; text-align: center;
  color: var(--sobre-oscuro-2); font-size: .97rem;
}
.servicios__pie a {
  color: var(--oro-claro); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.servicios__pie a:hover { border-bottom-color: currentColor; }

/* ───────────────────────────────────────────── propuesta de valor */
/* 2x2 y no 3+1: con tres columnas el cuarto punto quedaba solo en su fila */
.valor__lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(1.6rem, 3vw, 3.2rem);
}
.valor__item {
  display: grid; grid-template-columns: auto 1fr; gap: 1.3rem;
  align-items: start;
  padding-top: 1.6rem;
  border-top: 1px solid var(--borde);
}
.valor__num {
  font-family: var(--serif);
  font-size: 2.1rem; font-weight: 700; line-height: 1;
  color: var(--oro); opacity: .9;
}
.valor__item h3 { margin-bottom: .4rem; }
.valor__item p { margin: 0; color: var(--tinta-2); font-size: .95rem; }

/* ─────────────────────────────────────────────────── cómo trabajamos */
.pasos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.4rem, 2.6vw, 2.4rem);
  counter-reset: paso;
}
.pasos li { position: relative; padding-top: 3.9rem; }
.pasos li::before {
  content: ''; position: absolute; top: 27px; left: 54px; right: -24px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--borde) 0 6px, transparent 6px 12px);
}
.pasos li:last-child::before { display: none; }
.pasos__num {
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--fondo);
  border: 1px solid var(--oro);
  color: var(--oro-tinta);
  font-family: var(--serif); font-size: 1.3rem; font-weight: 700;
}
:root[data-tema="oscuro"] .pasos__num { color: var(--oro-claro); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .pasos__num { color: var(--oro-claro); }
}
.pasos h3 { margin-bottom: .45rem; }
.pasos p { margin: 0; color: var(--tinta-2); font-size: .94rem; }

/* ───────────────────────────────────────────────────────── cinta CTA */
.cinta {
  position: relative;
  padding: clamp(56px, 7vw, 92px) 0;
  background:
    radial-gradient(70% 160% at 12% 50%, rgb(190 154 84 / .2), transparent 60%),
    linear-gradient(120deg, var(--marino-2), var(--marino) 60%, #06101B);
  color: var(--sobre-oscuro);
  overflow: hidden;
}
.cinta::after {
  content: ''; position: absolute; inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
}
.cinta__caja {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.8rem, 4vw, 3.5rem); flex-wrap: wrap;
}
.cinta h2 { margin: 0; color: #FFFDF8; font-size: clamp(1.7rem, 2.9vw, 2.5rem); }
.cinta .rotulo { margin-bottom: .8rem; }

/* ─────────────────────────────────────────────────────────── contacto */
.contacto__datos h2 { margin-bottom: 1rem; }
.contacto__datos > p { color: var(--tinta-2); max-width: 44ch; }
.contacto__lista { display: grid; gap: 1.5rem; margin-top: 2.3rem; }
.contacto__lista li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.contacto__icono {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: color-mix(in srgb, var(--oro) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--oro) 36%, transparent);
  color: var(--rotulo);
}
.contacto__lista strong {
  display: block;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--rotulo); margin-bottom: .15rem;
}
.contacto__lista a, .contacto__lista span { color: var(--tinta); text-decoration: none; font-size: .97rem; }
.contacto__lista a:hover { color: var(--rotulo); }

.formulario {
  padding: clamp(1.7rem, 3vw, 2.5rem);
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: calc(var(--radio) + 6px);
  box-shadow: var(--sombra);
}
.formulario h3 { margin-bottom: 1.4rem; font-size: 1.4rem; }
.campo { margin-bottom: 1.05rem; }
.campo--par { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.campo label {
  display: block;
  font-size: .82rem; font-weight: 600;
  color: var(--tinta); margin-bottom: .42rem;
}
.campo label span { color: #C0392B; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .78rem .95rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  color: var(--tinta);
  font: 400 .95rem/1.5 var(--sans);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo textarea { resize: vertical; min-height: 104px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 0;
  border-color: var(--oro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 22%, transparent);
}
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgb(192 57 43 / .14);
}
.formulario .boton--bloque { margin-top: .5rem; }
.formulario__legal {
  margin: 1.1rem 0 0;
  font-size: .78rem; line-height: 1.5; text-align: center;
  color: var(--tinta-2);
}
.formulario__legal a { color: var(--rotulo); font-weight: 600; text-decoration: none; }
.formulario__legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.enlace-alterno {
  display: block; width: 100%; margin-top: .9rem;
  background: none; border: 0; cursor: pointer;
  font: 500 .88rem var(--sans); color: var(--tinta-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.enlace-alterno:hover { color: var(--rotulo); }
.formulario__nota { margin: 1rem 0 0; font-size: .86rem; min-height: 1.2em; }
.formulario__nota[data-estado="mal"] { color: #C0392B; }
.formulario__nota[data-estado="bien"] { color: #1E7F4E; }

/* El enlace del plan B (WhatsApp cuando el correo no sale). Va subrayado y en
   negrita porque es lo que la persona tiene que pulsar para no quedarse sin
   contactar a la firma: no puede verse como texto corrido. */
.aviso__enlace {
  color: inherit; font-weight: 700; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px;
}

/* El boton mientras el servidor manda el correo: se desactiva para que un
   segundo clic no mande la misma solicitud dos veces. */
.boton[aria-busy="true"] { opacity: .72; cursor: progress; }

/* ── EL SEÑUELO del formulario (2026-10-27): un campo que las personas no ven y
   los bots que llenan todo si. Lo que llegue ahi se descarta en el servidor.
   🔴 NO se esconde con `display:none` ni `visibility:hidden`: los bots que vale
   la pena frenar justamente saltan los campos escondidos asi. Se saca de la
   pantalla, y en el HTML va con `tabindex="-1"` y `aria-hidden="true"` para que
   no lo alcance ni el tabulador ni un lector de pantalla. */
.senuelo {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ────────────────────────────────────────────────────────────── pie */
.pie { background: var(--marino); color: var(--sobre-oscuro-2); padding-top: clamp(52px, 6vw, 80px); }
.pie__caja {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(1.8rem, 3vw, 3rem);
  padding-bottom: clamp(36px, 4vw, 56px);
}
.pie__marca img { height: 52px; width: auto; margin-bottom: 1rem; }
.pie__nombre {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 700;
  letter-spacing: .14em; color: var(--sobre-oscuro); margin: 0 0 .25rem;
}
.pie__nombre small {
  display: block;
  font-family: var(--sans); font-size: .64rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--oro-claro); margin-top: .3rem;
}
.pie__lema { font-size: .86rem; margin: 0; }
.pie__col { display: grid; align-content: start; gap: .55rem; }
.pie__col h4 {
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro-claro); margin: 0 0 .5rem;
}
.pie__col a, .pie__col span { font-size: .89rem; text-decoration: none; color: var(--sobre-oscuro-2); }
.pie__col a { transition: color .2s ease; }
.pie__col a:hover { color: var(--oro-brillo); }
.pie__raya { border-top: 1px solid var(--borde-oscuro); padding: 1.3rem 0; }
.pie__raya p { margin: 0; font-size: .81rem; text-align: center; }

/* ───────────────────────────────────────────────── botón de WhatsApp */
.wasap {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
  z-index: 80;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  box-shadow: 0 12px 30px -8px rgb(37 211 102 / .6);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.wasap:hover { transform: scale(1.09); box-shadow: 0 16px 36px -8px rgb(37 211 102 / .75); }
/* Sin el halo que latia sin parar: en una pagina de una firma contable, un boton
   palpitando es ruido. El verde de WhatsApp ya basta para que se vea. */

/* ─────────────────────────────────────────────── entrada al hacer scroll */
/* ⚠️ El contenido se esconde SOLO si hay JavaScript (la clase `js` la pone el script
   del <head>). Si el JS no corre —falla, lo bloquean, es un robot que no lo ejecuta—
   la pagina se ve entera, quieta, en vez de quedar en blanco. Costo: una clase. */
.js .anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
}
.js .anim.vista { opacity: 1; transform: none; }
.js .anim:nth-child(2) { transition-delay: .07s; }
.js .anim:nth-child(3) { transition-delay: .14s; }
.js .anim:nth-child(4) { transition-delay: .21s; }
.js .anim:nth-child(5) { transition-delay: .28s; }
.js .anim:nth-child(6) { transition-delay: .35s; }
.js .anim:nth-child(7) { transition-delay: .42s; }

/* ─────────────────────────────────── paginas de texto (politica de datos) */
.cabecera--solida { position: sticky; }
.documento { padding: calc(var(--barra) + clamp(40px, 6vw, 72px)) 0 clamp(56px, 7vw, 96px); }
.documento__caja { max-width: 78ch; }
.documento h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .6rem; }
.documento h2 {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  margin: 2.4rem 0 .8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--borde);
}
.documento p, .documento li { color: var(--tinta-2); }
.documento strong { color: var(--tinta); font-weight: 600; }
.documento a { color: var(--rotulo); }
.documento ul { display: grid; gap: .55rem; margin: 0 0 1.2rem; }
.documento ul li { position: relative; padding-left: 1.25rem; }
.documento ul li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; background: var(--oro); transform: rotate(45deg);
}
.documento__fecha {
  font-size: .84rem; letter-spacing: .04em;
  color: var(--tinta-2); margin-bottom: 2.4rem;
}
.documento__cierre {
  margin-top: 2.4rem; padding-top: 1.6rem;
  border-top: 1px solid var(--borde);
  font-size: .92rem;
}
.documento__volver { margin-top: 2.4rem; }

/* ───────────────────────────────────────────────────────── responsive */
@media (max-width: 1080px) {
  .hero__caja { grid-template-columns: 1fr; }
  .hero__tarjeta { max-width: 420px; }
  .rejilla-2 { grid-template-columns: 1fr; }
  .firma__sello { order: -1; }
  .firma__sello picture { width: min(66%, 330px); }
  .pie__caja { grid-template-columns: 1fr 1fr; }
}

/* 1024 y no 860: entre esos dos anchos los seis enlaces del menu no caben y se
   parten en dos lineas («La firma», «Agenda una consulta»). Abajo de 1024 va el
   menu desplegable, que a ese ancho se ve mejor que un menu apretado.
   ⚠️ Si se cambia este numero, cambiar tambien el `innerWidth > 1024` de sitio.js. */
@media (max-width: 1024px) {
  .hamburguesa { display: flex; }
  .menu {
    position: fixed; inset: var(--barra) 0 auto;
    display: grid; gap: 0;
    padding: 1rem var(--margen) 1.6rem;
    background: var(--barra-panel);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--barra-borde);
    transform: translateY(-14px);
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, transform .28s ease, visibility .28s;
  }
  .menu.abierto { opacity: 1; visibility: visible; transform: none; }
  .menu > a:not(.boton) {
    padding: .9rem 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    font-size: 1rem;
  }
  .menu > a:not(.boton)::after { display: none; }
  .menu__cta { margin-top: 1.1rem; justify-self: start; }
  .pasos li::before { display: none; }
}

@media (max-width: 620px) {
  :root { --barra: 66px; }
  .marca__sello { height: 38px; }
  .marca__texto strong { font-size: 1.05rem; }
  .marca__texto small { font-size: .56rem; }
  .hero { min-height: auto; }
  .hero__botones .boton { flex: 1 1 100%; }
  .campo--par { grid-template-columns: 1fr; }
  .pie__caja { grid-template-columns: 1fr; }
  .cinta__caja .boton { width: 100%; }
  .tarjeta--ancha ul { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .anim { opacity: 1; transform: none; }
}

@media print {
  .cabecera, .wasap, .tira, .hero__botones, .formulario, .tema { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .seccion--oscura, .cinta, .pie { background: #fff !important; color: #000 !important; }
  .js .anim { opacity: 1 !important; transform: none !important; }
}