/* =========================================================================
   ASESORÍA CONTABLE FR — Landing page
   -------------------------------------------------------------------------
   Dirección visual tomada del Atlas de Imagen y de la Propuesta Web.

     Fucsia identidad .... #E92D8A  firma visual, logo, titulares
     Negro carbón ........ #0D0D0F  autoridad, estructura, fondos
     Blanco cálido ....... #F7F4F0  aire, claridad, equilibrio
     Champagne dorado .... #C9A96E  detalles premium, líneas, acentos

   Títulos: Michroma (geométrica de trazo fino, la más cercana al logo).
   Cuerpo:  Open Sans.

   La web alterna bandas: hero oscuro, cuerpo claro con tarjeta negra.
   ========================================================================= */


/* =========================================================================
   00. TOKENS
   ========================================================================= */

:root {
  /* Paleta de marca */
  --fucsia:      #E92D8A;
  --fucsia-deep: #C41E72;
  --negro:       #0D0D0F;
  --negro-2:     #151518;
  --negro-3:     #1E1E22;
  --blanco:      #F7F4F0;
  --champagne:   #C9A96E;
  --champagne-2: #B8934F;

  /* Variantes accesibles para TEXTO.
     Los códigos de marca no dan contraste AA sobre crema (#F7F4F0): medidos,
     --fucsia da 3.68:1 y --champagne 2.04:1. Para texto se oscurece el mismo
     tono hasta cumplir: 4.51:1 y 3.05:1.
     Los códigos originales quedan intactos para líneas, bordes, íconos y
     todo lo que va sobre negro, donde sí cumplen holgadamente. */
  --fucsia-texto:    #CF287B;
  --champagne-texto: #A38959;

  /* Tinta */
  --ink:         #17171A;
  --ink-soft:    #55555C;
  --ink-mute:    #6F6F76;   /* 4.55:1 sobre crema */
  --on-dark:     #F7F4F0;
  --on-dark-2:   #CFC9C4;
  --on-dark-3:   #9A9490;

  /* Líneas y bordes */
  --line-dark:   rgba(13, 13, 15, .12);
  --line-light:  rgba(247, 244, 240, .14);
  --line-gold:   rgba(201, 169, 110, .38);
  --line-gold-2: rgba(201, 169, 110, .22);

  /* Tipografías.
     Títulos: el Atlas dice "arian", pero el logo y la propuesta usan una
     geométrica cuadrada de trazo fino (tipo Eurostile). Michroma es la más
     cercana de las gratuitas de Google Fonts. Michroma tiene un solo peso
     (400), así que los grosores no se usan: el carácter viene de la fuente.
     Cuerpo: el Atlas dice "open sauce", que no existe en Google Fonts
     (devuelve error 400), así que se usa Open Sans. */
  --fuente-titulo: 'Michroma', 'Eurostile', 'Bank Gothic', 'Arial Black', sans-serif;
  --fuente-texto:  'Open Sans', 'Open Sauce Sans', 'Open Sauce One', Arial, sans-serif;

  /* Métrica */
  --ancho-max:  1240px;
  --gutter:     clamp(1.25rem, 4.5vw, 3rem);
  --header-h:   84px;
  --transicion: .35s cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================================
   01. RESET Y BASE
   ========================================================================= */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--blanco);
  color: var(--ink);
  font-family: var(--fuente-texto);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-padding-top: calc(var(--header-h) + 1px);
}

/* Bloquea el scroll del fondo mientras el menú móvil está abierto */
body.overflow-hidden { overflow: hidden; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 400;
  /* Michroma tiene una altura de caja alta: con menos de ~1.3 las mayúsculas
     de dos líneas seguidas se tocan entre sí. */
  line-height: 1.3;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
address { font-style: normal; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transicion), border-color var(--transicion),
              background-color var(--transicion), opacity var(--transicion);
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

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


/* =========================================================================
   02. UTILIDADES
   ========================================================================= */

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

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: .85rem 1.5rem;
  /* mismo motivo que .btn--linea: con --fucsia el blanco queda en 4.03:1 */
  background: var(--fucsia-deep);
  color: #fff;
  font-family: var(--fuente-titulo);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform .25s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Regla champagne */
.regla {
  display: block;
  width: 46px;
  height: 2px;
  border: 0;
  background: var(--champagne);
}


/* =========================================================================
   03. MARCA — el logo de la clienta
   -------------------------------------------------------------------------
   Un único componente, idéntico en header, pie y páginas legales.
   Se usa el archivo real provisto por la clienta (logo.jfif), recortado en
   círculo y con las esquinas transparentes, para que se vea igual sobre el
   negro del hero y sobre el crema del pie.
   ========================================================================= */

.marca { flex: 0 0 auto; }

.marca__disco {
  display: block;
  width: 62px;
  transition: transform var(--transicion);
}
.marca__disco--pie { width: 54px; }

.marca__logo {
  display: block;
  width: 100%;
  height: auto;
}

.marca:hover .marca__disco { transform: rotate(-7deg); }


/* =========================================================================
   04. BOTONES
   ========================================================================= */

/* Contorno — sobre fondo oscuro */
.btn--linea {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.9rem;
  border: 1px solid var(--on-dark);
  color: var(--on-dark);
  background: transparent;
  font-family: var(--fuente-titulo);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--transicion), color var(--transicion),
              border-color var(--transicion);
}
/* El relleno usa --fucsia-deep y no --fucsia: el fucsia de marca con texto
   blanco da 4.03:1 y este texto mide 11.8px, asi que no llega a AA.
   --fucsia-deep da 5.56:1 y es el mismo tono, apenas un punto mas oscuro. */
.btn--linea:hover,
.btn--linea:focus-visible {
  background: var(--fucsia-deep);
  border-color: var(--fucsia-deep);
  color: #fff;
}

/* Sólido — sobre fondo claro */
.btn--solido {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.9rem;
  border: 1px solid var(--negro);
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente-titulo);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--transicion), border-color var(--transicion);
}
.btn--solido:hover,
.btn--solido:focus-visible {
  background: var(--fucsia);
  border-color: var(--fucsia);
  color: #fff;
}

.btn__flecha { transition: transform var(--transicion); }
.btn--linea:hover .btn__flecha,
.btn--solido:hover .btn__flecha { transform: translateX(6px); }

/* Glifo de WhatsApp dentro de los botones. Va en em para que cambie de tamaño
   con el boton y no haya que repetir el valor en .btn--linea-mini, que tiene
   otro font-size. */
.btn__wa {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
}


/* =========================================================================
   05. HEADER
   ========================================================================= */

.hero,
.seccion,
.footer { position: relative; z-index: 1; }

.hero,
.seccion,
.footer[id] { scroll-margin-top: calc(var(--header-h) + 1px); }

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Transparente arriba para que el damasco del hero se vea por detrás del
     menú, como en la propuesta. Al scrollear toma fondo para no quedar
     flotando sobre el contenido. */
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--transicion), border-color var(--transicion),
              box-shadow var(--transicion);
}

/* Ya scrolleado sobre el negro: fondo sólido */
.header.is-solido {
  background-color: rgba(13, 13, 15, .92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(247, 244, 240, .08);
}

/* Al salir del hero, el header pasa a fondo claro */
.header.is-claro {
  background-color: rgba(247, 244, 240, .95);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-gold-2);
  box-shadow: 0 14px 34px -32px rgba(13, 13, 15, .7);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

/* --- Navegación --- */
.nav__lista { display: flex; align-items: center; gap: clamp(1.3rem, 2.6vw, 2.6rem); }

.nav__link {
  position: relative;
  display: inline-block;
  padding: .45rem 0;
  color: var(--on-dark-2);
  font-family: var(--fuente-titulo);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  /* En la propuesta el subrayado del ítem activo es champagne, no fucsia */
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--on-dark); }
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }

/* Sección activa */
.nav__link--activo,
.nav__link[aria-current] { color: var(--on-dark); }
.nav__link--activo::after,
.nav__link[aria-current]::after { transform: scaleX(1); }

/* Cuando el header va claro */
.header.is-claro .nav__link { color: var(--ink-soft); }
.header.is-claro .nav__link:hover,
.header.is-claro .nav__link:focus-visible { color: var(--ink); }
.header.is-claro .nav__link--activo,
.header.is-claro .nav__link[aria-current] { color: var(--ink); }

/* --- Hamburguesa --- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0 10px;
  border: 1px solid currentColor;
  border-radius: 2px;
  color: var(--on-dark);
}
.nav-toggle__linea {
  display: block;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transition: transform var(--transicion), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__linea:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__linea:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__linea:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.header.is-claro .nav-toggle { color: var(--ink); }


/* =========================================================================
   06. HERO  (banda oscura)
   ========================================================================= */

.hero {
  position: relative;
  /* El hero sube por detrás del header para que el damasco llegue hasta arriba
     y el menú quede sobre la trama, como en la propuesta. El padding devuelve
     el espacio que ocupa el header. */
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  background-color: var(--negro);
  color: var(--on-dark);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}

/* Capa de damasco: cubre todo el hero y se funde con el negro hacia la
   izquierda, que es donde va el texto. Así no se ve el borde del recorte:
   la trama entra y sale como si el fondo la continuara. */
.hero__textura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("../img/damasco-hero.jpg");
  background-size: cover;
  background-position: 74% 44%;
  opacity: .58;
}

.hero__textura::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      var(--negro) 0%,
      rgba(13, 13, 15, .88) 22%,
      rgba(13, 13, 15, .35) 52%,
      rgba(13, 13, 15, .18) 100%),
    linear-gradient(180deg,
      rgba(13, 13, 15, .75) 0%,
      rgba(13, 13, 15, 0) 26%,
      rgba(13, 13, 15, 0) 72%,
      rgba(13, 13, 15, .55) 100%);
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-top: clamp(3.5rem, 8vw, 6.5rem);
}

.hero__contenido { max-width: 38rem; }

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.75rem;
  color: var(--on-dark-3);
  font-family: var(--fuente-titulo);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow__sep { color: var(--champagne); }

/* H1: trazo fino, mayúsculas, espaciado — como la referencia de marca.
   Michroma es más ancha que una grotesca común, así que el cuerpo se mantiene
   bajo para que "CONTABLE PARA" entre en la misma línea. */
.hero__titulo {
  font-size: clamp(1.7rem, 3.5vw, 2.7rem);
  line-height: 1.28;
  letter-spacing: .01em;
  color: var(--fucsia);
}

.hero__bajada {
  max-width: 33rem;
  margin-top: 1.75rem;
  color: var(--on-dark-2);
  font-size: 1.05rem;
  line-height: 1.8;
}

.hero__acciones { margin-top: 2.75rem; }

/* Monograma FR como marca de agua. Va DESPUÉS del damasco en el orden de
   pintado, así que la trama se le ve a través. El color vino ya viene en el
   PNG; acá sólo se controla que tan presente se percibe.
   Va inclinado y HOLGADO por arriba para que se lea la pieza completa: antes
   se sangraba por abajo y el pie de las letras quedaba cortado contra el
   borde del hero. Medido sobre 9 anchos (390 a 1440): con este bottom el
   monograma queda entero con ~20px de aire en todos ellos. */
.hero__fr {
  position: absolute;
  z-index: 1;
  right: 13%;
  bottom: 18%;
  width: min(35%, 460px);
  height: auto;
  /* Medido a ojo sobre 4 renderizados (.30 / .50 / .65 / .80): con .65 el FR
     se lee POR DELANTE del damasco y a la vez la trama sigue afloreando a
     través de las letras. A .80 las letras quedan casi opacas y se pierde
     esa integración con la textura. */
  opacity: .65;
  /* Sin rotacion: el FR va derecho, como el logo chico del menu. Antes
     llevaba -3 grados, que lo dejaba inclinado y ademas ensanchaba la caja
     unos 7%, comiendose el margen derecho. */
  pointer-events: none;
  user-select: none;
}


/* =========================================================================
   07. SERVICIOS  (banda clara)
   ========================================================================= */

.seccion { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* Encabezado a dos columnas: título izquierda, párrafo derecha */
.section-head {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-kicker {
  display: block;
  margin-bottom: 1.15rem;
  color: var(--fucsia-texto);
  font-family: var(--fuente-titulo);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.section-titulo {
  font-size: clamp(1.3rem, 2.4vw, 1.95rem);
  color: var(--ink);
}
.section-titulo .regla { margin-top: 1.5rem; }

.section-intro {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.85;
  padding-top: 2.1rem;
}

/* =========================================================================
   SERVICIOS - desplegables
   -------------------------------------------------------------------------
   Se usa <details>/<summary> nativo: ya es accesible por teclado y lo
   anuncia el lector de pantalla, asi que no hace falta JS para el
   comportamiento de abrir y cerrar.
   ========================================================================= */

.servicios { border-top: 1px solid var(--line-gold-2); }

.servicio { border-bottom: 1px solid var(--line-gold-2); }

/* El summary es el boton: toda la fila es clickable */
.servicio__cabecera {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-block: clamp(1.35rem, 2.4vw, 1.9rem);
  cursor: pointer;
  list-style: none;
}
.servicio__cabecera::-webkit-details-marker { display: none; }

.servicio__num {
  flex: 0 0 auto;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1;
  color: var(--champagne-texto);
  transition: color var(--transicion);
}

.servicio__titulo {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(.95rem, 1.5vw, 1.18rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--transicion);
}

.servicio__chevron {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--ink-mute);
  transition: transform var(--transicion), color var(--transicion);
}

.servicio__cabecera:hover .servicio__titulo { color: var(--fucsia-texto); }
.servicio__cabecera:hover .servicio__chevron { color: var(--fucsia-texto); }
.servicio__cabecera:hover .servicio__num { color: var(--champagne); }

/* El summary es un botón nativo: hay que mostrar el foco con teclado */
.servicio__cabecera:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: -2px;
}
.servicio__cabecera:focus-visible .servicio__titulo { color: var(--fucsia-texto); }
.servicio__cabecera:focus-visible .servicio__chevron { color: var(--fucsia-texto); }

/* abierto */
.servicio[open] .servicio__chevron {
  transform: rotate(180deg);
  color: var(--fucsia-texto);
}
.servicio[open] .servicio__num { color: var(--fucsia-texto); }

/* --- cuerpo --- */
.servicio__cuerpo { padding-bottom: clamp(1.75rem, 3vw, 2.5rem); }

.servicio__bajada {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.servicio__lista { list-style: none; max-width: 46rem; }
.servicio__lista li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: .6rem;
  color: var(--ink-soft);
  font-size: .97rem;
  line-height: 1.75;
}
.servicio__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--champagne);
}
.servicio__lista strong { color: var(--ink); font-weight: 600; }

/* boton de cada servicio */
.btn--linea-mini {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.5rem;
  padding: .75rem 1.4rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  font-family: var(--fuente-titulo);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background-color var(--transicion), color var(--transicion),
              border-color var(--transicion);
}
.btn--linea-mini:hover,
.btn--linea-mini:focus-visible {
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}


/* =========================================================================
   08. SOBRE EL ESTUDIO
   ========================================================================= */

.sobre__grid {
  display: grid;
  /* En la propuesta la caja negra se lleva ~51% del ancho (medido sobre el
     PDF: 520 de 1015 px útiles). Con .95fr/1.05fr quedaba en 47% y el
     nombre se partia en tres lineas en vez de dos. */
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.sobre__texto { position: relative; }
.sobre__texto .regla { margin-block: 1.5rem; }
.sobre__texto p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.85; }
.sobre__texto .btn--solido { margin-top: 2.25rem; }

/* Tarjeta negra de perfil */
.perfil {
  position: relative;
  background: var(--negro);
  color: var(--on-dark);
  /* El aire VERTICAL es lo que hace que la caja se lea como bloque y no como
     una franja: en la propuesta ronda los 100px sobre una caja de 520 de
     ancho (~19%). Con 48px quedaba en 1.9:1, una barra.
     El lateral va más cerrado a propósito: si se engorda también, la columna
     de texto queda tan angosta que el nombre se parte en tres lineas. */
  padding-block: clamp(2.5rem, 7.5vw, 6.5rem);
  padding-inline: clamp(1.5rem, 3vw, 2.75rem);
  overflow: hidden;
}

/* Foto del escritorio detrás de la caja negra. Mismo recurso que el damasco
   en el hero: la imagen aporta textura de color pero no compite con la
   lectura. Se baja bastante la opacidad y se le pone un velo negro para que
   los textos (champagne y gris claro) conserven el contraste. */
.perfil__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Encuadre desplazado para que se vea la mesa y la lámpara, no la cara:
     a esta opacidad lo que interesa es la textura de escritorio. */
  object-position: 74% 88%;
  opacity: .13;
  pointer-events: none;
  user-select: none;
}
/* Velo para que la caja siga leyéndose como una caja negra y el texto
   no pierda contraste sobre la foto. */
.perfil::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(100deg, rgba(10,10,12,.95) 40%, rgba(10,10,12,.74) 100%),
    radial-gradient(120% 90% at 18% 50%, rgba(10,10,12,.9), transparent 70%);
  pointer-events: none;
}

.perfil__fila {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

.perfil__avatar {
  flex: 0 0 auto;
  /* En la propuesta el retrato ocupa ~35% del ancho de la caja negra. Con el
     tope anterior (138px) se quedaba en 27% y se veía Chico. */
  width: clamp(104px, 14vw, 192px);
  height: clamp(104px, 14vw, 192px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--negro-3);
}
.perfil__avatar img { width: 100%; height: 100%; object-fit: cover; }

.perfil__datos { min-width: 0; }

.perfil__datos .regla:first-child { margin-bottom: 1.1rem; }

.perfil__nombre {
  font-family: var(--fuente-titulo);
  font-size: clamp(.85rem, 1.2vw, 1rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--champagne);
}

.perfil__cargo {
  margin-top: .35rem;
  color: var(--on-dark-3);
  font-family: var(--fuente-titulo);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.perfil__datos .regla:nth-of-type(2) { margin-block: 1.35rem 1rem; }

.perfil__lema {
  color: var(--on-dark-2);
  font-family: var(--fuente-titulo);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.8;
}


/* =========================================================================
   09. CONTACTO
   -------------------------------------------------------------------------
   Antes los 7 CTA del sitio apuntaban a #contacto, que era el <footer>: al
   hacer clic en "Contactar" el visitante caia en una lista de mail,
   Instagram y matricula, sin ninguna accion a la vista. Esta es la seccion
   que ahora responde de verdad a esos enlaces. */
.contacto { border-top: 1px solid var(--line-dark); }

.contacto__grid {
  display: grid;
  /* Texto a la izquierda, formulario a la derecha. La columna del formulario
     es la mas ancha porque los campos necesitan aire para escribirse. */
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

/* min-width:0 para que las columnas puedan encogerse por debajo del ancho de su
   contenido. Sin esto, el formulario empuja la columna y aparece scroll
   horizontal en pantallas angostas. */
.contacto__grid > * { min-width: 0; }

.contacto__texto p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.85; }
.contacto__texto .section-titulo { margin-bottom: 1.5rem; }

/* --- Formulario de contacto --- */
.formulario { display: grid; gap: 1.35rem; }

.campo { display: grid; gap: .5rem; }

.campo__etiqueta {
  font-family: var(--fuente-titulo);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.campo__control {
  width: 100%;
  padding: .85rem 1rem;
  /* Borde al 50%: sobre el crema da 3.3:1, el minimo que pide 1.4.11 para el
     contorno de un control. Con el hairline al 12% del resto del sitio el campo
     se veia, pero su limite no llegaba a distinguirse. */
  border: 1px solid rgba(13, 13, 15, .5);
  background: var(--blanco);
  color: var(--ink);
  font-family: var(--fuente-texto);
  font-size: .95rem;
  line-height: 1.5;
  border-radius: 0;
}

.campo__control:hover { border-color: rgba(13, 13, 15, .68); }

/* El foco se marca con el fucsia de texto (4.51:1) y ademas con borde, para
   que se distinga tambien sin ver el color del anillo. */
.campo__control:focus-visible {
  outline: 2px solid var(--fucsia-texto);
  outline-offset: 2px;
  border-color: var(--fucsia-texto);
}

textarea.campo__control { min-height: 8.5rem; resize: vertical; }

/* La flecha nativa del select no sigue la paleta del sitio: se reemplaza por
   una propia, del mismo gris que las etiquetas. */
select.campo__control {
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2355555C' stroke-width='1.6'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  cursor: pointer;
}

/* Consentimiento: casilla y texto alineados arriba, el texto puede ocupar
   varias lineas sin que la casilla se estire. */
.campo--consentimiento {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}

.campo--consentimiento input {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .22rem;
  accent-color: var(--fucsia-texto);
}

.campo--consentimiento label {
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.campo--consentimiento a {
  color: var(--fucsia-texto);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.campo--consentimiento a:hover { color: var(--fucsia); }

/* Campo trampa: fuera de pantalla. Los lectores de pantalla tampoco lo
   anuncian (aria-hidden en el HTML) y el tabulador lo saltea (tabindex -1). */
.campo--trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Avisos de envío: los muestra main.js según ?estado=ok|error */
.formulario__aviso {
  padding: .95rem 1.1rem;
  border: 1px solid;
  font-size: .9rem;
  line-height: 1.6;
}
.formulario__aviso[hidden] { display: none; }
.formulario__aviso--ok {
  border-color: var(--champagne);
  background: rgba(201, 169, 110, .14);
  color: var(--ink);
}
.formulario__aviso--error {
  border-color: var(--fucsia-texto);
  background: rgba(207, 40, 123, .07);
  color: var(--ink);
}

/* =========================================================================
   10. FOOTER  (banda clara)
   ========================================================================= */

.footer {
  border-top: 1px solid var(--line-gold-2);
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
}

.footer__principal {
  display: flex;
  align-items: center;
  /* nowrap en escritorio: la fila de datos NUNCA se parte, que era el
     objetivo. Antes era wrap y con el gap ajustado a mano, cada palabra
     nueva hacia caer el ultimo bloque a una segunda linea. Con nowrap,
     los bloques pueden encogerse y parten su texto internamente en vez
     de empujar la fila. En movil se vuelve a wrap. */
  flex-wrap: nowrap;
  /* 20px, no 27: con 27 el hueco se comia el ancho de los bloques (de 1022 a
     927px) y "Atencion presencial (con cita previa) y online" caia a 3
     lineas con "y online" huerfano, y el correo rozaba el separador. A 20 el
     texto mantiene sus 2 lineas y el hueco sigue siendo legible. Medido con
     el texto largo: el maximo absoluto sin comprimir es 15.3px. */
  gap: clamp(.9rem, 1.45vw, 1.25rem);
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
}

.footer__separador {
  flex: 0 0 1px;
  align-self: stretch;
  min-height: 2.4rem;
  width: 1px;
  /* Champagne al 40%: --line-gold-2 (22%) se perdia con los huecos que
     quedaron antes; con el hueco ahora en ~27px alcanza con un tono
     intermedio para separar sin marcar demasiado. */
  background: rgba(201, 169, 110, .4);
}

/* flex:0 0 auto = la marca NO se encoge. Si participate del reparto de ancho,
   "ASESORÍA CONTABLE FR" se partia en 3 lineas. El faltante lo absorbent los
   bloques de texto, que pueden partir su parrafo sin romper la marca. */
.footer__marca { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }

.footer__nombre {
  font-family: var(--fuente-titulo);
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--ink);
}

/* El logo es el mismo archivo en todos lados: el disco negro con damasco se
   integra al fondo oscuro del hero y contrasta sobre el crema del pie, sin
   necesidad de variantes por contexto. */

.footer__dato {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  /* flex:0 1 auto + min-width:0 = el bloque cede ancho antes que romper la
     fila; su texto pasa a la linea siguiente adentro del bloque. Sin esto el
     nowrap de arriba no serviria de nada. */
  flex: 0 1 auto;
  min-width: 0;
  /* Sobre crema (#F7F4F0): --ink-soft da 6.74:1 y --ink-mute 4.55:1. Los dos
     pasan AA. Los gris oscuro con "on-dark" NO sirven acá: el pie es claro. */
  color: var(--ink-soft);
  font-size: .86rem;
  line-height: 1.6;
}
.footer__dato svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: .2rem; color: var(--ink-soft); }
/* padding para que el area clickeable llegue al minimo de 24px (WCAG 2.5.8) */
.footer__dato a {
  display: inline-block;
  padding-block: .18rem;
  border-bottom: 1px solid var(--line-gold);
}
.footer__dato a:hover { color: var(--fucsia-texto); border-color: var(--fucsia); }
.footer__dato span { display: block; }

.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid var(--line-gold-2);
}

.footer__credenciales {
  color: var(--ink);
  font-family: var(--fuente-titulo);
  font-size: .66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.7;
}
.footer__credenciales span { color: var(--ink-mute); font-family: var(--fuente-texto); }

.footer__enlaces {
  display: flex;
  align-items: center;
  gap: .8rem;
  /* --ink-mute da 4.55:1 sobre crema: pasa AA. Los enlaces van un paso más
     oscuro (--ink, 14.2:1) porque son de 10px y son el destino de un clic. */
  color: var(--ink-mute);
  font-family: var(--fuente-titulo);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* mismo motivo que arriba: area clickeable minima de 24px */
.footer__enlaces a {
  display: inline-block;
  padding-block: .45rem;
  color: var(--ink);
}
.footer__enlaces a:hover { color: var(--fucsia-texto); }
.footer__enlaces .sep { color: var(--champagne); }


/* =========================================================================
   10. PÁGINAS LEGALES
   ========================================================================= */

.legal {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
}

.legal__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line-gold-2);
}
.legal__volver {
  color: var(--ink-soft);
  font-family: var(--fuente-titulo);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.legal__volver:hover { color: var(--fucsia); }

.legal__titulo {
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  color: var(--ink);
}
.legal__titulo + .regla { margin-top: 1.4rem; }

.legal__aviso {
  margin-block: 2rem 2.5rem;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--champagne);
  background: rgba(201, 169, 110, .1);
  color: var(--ink-soft);
  font-size: .93rem;
  line-height: 1.7;
}
.legal__aviso strong { color: #7C6842; font-weight: 600; }   /* 4.6:1 sobre el crema del aviso */

.legal__bloque { max-width: 46rem; }
.legal__bloque + .legal__bloque { margin-top: 2.25rem; }
.legal__bloque h2 {
  margin-bottom: .6rem;
  font-size: .92rem;
  letter-spacing: .06em;
  color: var(--fucsia-texto);
}
.legal__bloque p { color: var(--ink-soft); line-height: 1.85; }
.legal__bloque strong { color: var(--ink); font-weight: 600; }

.legal__pie {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  color: var(--ink-mute);
  font-family: var(--fuente-titulo);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}


/* =========================================================================
   11. ANIMACIONES DE ENTRADA
   ========================================================================= */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }


/* =========================================================================
   12. RESPONSIVE
   ========================================================================= */

@media (max-width: 1024px) {
  :root { --header-h: 74px; }

  .section-head { grid-template-columns: 1fr; gap: 0; }
  /* sin gap: la grilla de contacto tiene una sola columna */
  .contacto__grid { grid-template-columns: minmax(0, 44rem); }
  .section-intro { padding-top: 1.5rem; max-width: 44rem; }

  .footer__principal { gap: 1.25rem 1.75rem; }
}

/* Los separadores verticales se ocultan ANTES de que el pie se parta en dos
   filas, no a los 1024px. Medido: con todo en una fila el pie entra hasta
   1200px; a 1180px ya pasa a dos filas y el ultimo separador queda colgando
   franja de 1025-1199px con separadores colgando. */
@media (max-width: 1199px) {
  .footer__separador { display: none; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  /* La ficha negra se apila recien acá, no a 1024. Antes el grid pasaba a una
     sola columna a 1024 y la caja quedaba estirada al ancho del viewport con
     el contenido en fila: una barra plana de 4.5:1 en vez del bloque de ~1.5:1
     que muestra la propuesta. */
  .sobre__grid { grid-template-columns: 1fr; }

  /* Y acá la ficha se apila por dentro (foto arriba, texto abajo). Sin esto,
     al ocuparla toda la fila el contenido horizontal la deja en 4:1. */
  .perfil__fila {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .nav {
    position: absolute;
    inset-inline: 0; top: 100%;
    max-height: 0;
    visibility: hidden;
    overflow: hidden;
    padding-inline: var(--gutter);
    background-color: rgba(13, 13, 15, .98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line-gold-2);
    transition: max-height var(--transicion), visibility var(--transicion);
  }
  .nav.is-abierto { max-height: 24rem; visibility: visible; }

  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; padding-block: .5rem 1.25rem; }
  .nav__link,
  .header.is-claro .nav__link {
    display: block;
    padding: 1rem 0;
    color: var(--on-dark-2);
    border-bottom: 1px solid var(--line-light);
  }
  .nav__link::after { display: none; }

  .hero__grid { grid-template-columns: 1fr; }
  /* En mobile el texto ocupa todo el ancho: el damasco se atenúa bastante más
     y el FR queda como una insinuación al fondo, no compite con la lectura. */
  .hero__textura {
    background-position: 68% 40%;
    opacity: .3;
  }
  .hero__fr {
    width: min(62%, 320px);
    /* Mismo margen real que en escritorio. Con right:6% el margen visible
       quedaba en 5%: la rotacion de -3 grados ensancha la caja y se come
       unos 7 puntos. */
    right: 13%;
    /* mismo criterio que arriba: entero, no sangrado. Acá el alto del hero es
       mayor respecto del monograma, así que alcanza con menos porcentaje. */
    bottom: 14%;
    opacity: .42;
  }


  .legal__cabecera { flex-direction: column-reverse; align-items: flex-start; gap: 1.25rem; }

    /* Texto y formulario pasan a una sola columna: a este ancho la del
       formulario quedaria demasiado angosta para escribir comodo. */
    .contacto__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  :root { --header-h: 68px; }

  /* El boton de telefono lleva el numero completo y los .btn son nowrap: en
     angosto no entra y ensancha el grid hasta provocar scroll horizontal.
     Se le permite quebrar la linea en dos. */
  .contacto__acciones { flex-direction: column; align-items: stretch; }
  .contacto__acciones .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .hero__textura { opacity: .22; }
  .hero__fr { opacity: .34; }

  .hero__grid { padding-top: 2.75rem; }
  .hero__titulo { font-size: clamp(1.55rem, 6.6vw, 2.1rem); }
  .hero__bajada { margin-top: 1.35rem; }
  .hero__acciones { margin-top: 2rem; }
  .btn--linea, .btn--solido { width: 100%; justify-content: center; }

  .eyebrow { font-size: .56rem; letter-spacing: .1em; gap: .3rem; }

  .servicio__cabecera { gap: .9rem; padding-block: 1.2rem; }
  .servicio__num { font-size: 1.35rem; }
  .servicio__chevron { width: 19px; height: 19px; }
  .servicio__lista li { font-size: .95rem; }
  .btn--linea-mini { width: 100%; justify-content: center; }

  /* en movil se vuelve a apilar: nowrap con tan poco ancho dejaria los
     bloques angostos y altisimos en vez de una lista legible */
  .footer__principal { gap: 1.25rem; flex-wrap: wrap; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 1rem; }
}


/* =========================================================================
   13. BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================= */

/* Fucsia de marca con el glifo en blanco (4.03:1, sobre el mínimo de 3:1
   que pide un objeto gráfico). Va en z-index 90: por debajo del header (100)
   y del skip-link (200), para no tapar ninguno de los dos. */
.wa-flotante {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background-color: var(--fucsia);
  color: #fff;
  box-shadow: 0 6px 18px rgba(23, 23, 26, .22);
  transition: background-color .2s ease, box-shadow .2s ease,
              transform .2s ease, opacity .2s ease, visibility .2s ease;
}

.wa-flotante svg {
  width: 55%;
  height: 55%;
}

.wa-flotante:hover,
.wa-flotante:focus-visible {
  background-color: var(--fucsia-deep);
  box-shadow: 0 10px 24px rgba(23, 23, 26, .3);
  transform: translateY(-2px);
}

.wa-flotante:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Retirado al llegar al pie. visibility lo saca también del tabulador y del
   árbol de accesibilidad, no solo de la vista. */
.wa-flotante--oculto {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}


/* =========================================================================
   14. MOVIMIENTO E IMPRESIÓN
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  [data-reveal], .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .header, .btn, .wa-flotante { display: none !important; }
  body { background: #fff; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}