/* Constanza Urquiola · Estudio Jurídico
   Paleta tomada del logotipo: carbón, champán (solo acento), marfil. */

:root {
  --carbon: #141519;
  --carbon-alto: #1a1b20;
  --carbon-hondo: #0e0f12;
  --marfil: #efe8da;
  --marfil-80: rgba(239, 232, 218, .8);
  --marfil-62: rgba(239, 232, 218, .64);
  --marfil-linea: rgba(239, 232, 218, .14);
  --champan: #c8ae7d;
  --champan-claro: #dcc79f;
  --champan-linea: rgba(200, 174, 125, .38);
  --papel: #f2ece1;
  --tinta: #1a1b20;
  --tinta-2: #4a463f;
  --tinta-linea: rgba(26, 27, 32, .14);
  --oro-tinta: #7a5f33;

  --f-titulo: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --f-serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --f-sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --ancho: 1320px;
  --margen: clamp(20px, 5vw, 64px);
  --nav-alto: 88px;
  --seccion: clamp(5rem, 4rem + 6vw, 9.5rem);

  /* Movimiento: una sola familia de curva exponencial de salida. Las respuestas a la mano (hover, presión)
     son cortas; las apariciones editoriales, más largas pero nunca bloquean la interacción. */
  --suave: cubic-bezier(.16, 1, .3, 1);
  --morfo: cubic-bezier(.65, 0, .35, 1);
  --t-presion: .12s;
  --t-hover: .3s;
  --t-estado: .4s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--carbon);
  color: var(--marfil);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
/* Táctil: sin destello gris al tocar y sin la espera de doble toque; cada control tiene su propio :active. */
a, button, input, textarea, label { -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }

::selection { background: var(--champan); color: var(--carbon); }
.estudio ::selection { background: var(--tinta); color: var(--papel); }

html { scrollbar-color: #3a3a3d var(--carbon-hondo); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--carbon-hondo); }
::-webkit-scrollbar-thumb { background: #3a3a3d; border: 2px solid var(--carbon-hondo); }
::-webkit-scrollbar-thumb:hover { background: #6b5d44; }

:focus-visible { outline: 1px solid var(--champan); outline-offset: 4px; }
.estudio :focus-visible { outline-color: var(--oro-tinta); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  padding: .7rem 1rem; background: var(--marfil); color: var(--carbon);
  font-size: .85rem; transform: translateY(-160%); transition: transform .3s var(--suave);
}
.saltar:focus { transform: none; }

.contenedor { width: 100%; max-width: calc(var(--ancho) + var(--margen) * 2); margin-inline: auto; padding-inline: var(--margen); }

.ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Botones y enlaces ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
  min-height: 52px; padding: .95rem 1.7rem;
  font-family: var(--f-sans); font-size: .78rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; line-height: 1.2;
  border: 1px solid transparent; border-radius: 1px; cursor: pointer;
  transition: background-color var(--t-hover) var(--suave), color var(--t-hover) var(--suave), border-color var(--t-hover) var(--suave), transform .24s var(--suave);
  -webkit-user-select: none; user-select: none;
}
/* Presión: se hunde apenas al instante y se recupera más despacio (asimétrico, como un botón físico). */
.btn:active { transform: scale(.98); transition-duration: var(--t-hover), var(--t-hover), var(--t-hover), var(--t-presion); }
.btn .ico { width: 1.25rem; height: 1.25rem; }
.btn--primario { background: var(--champan); color: var(--carbon); }
.btn--primario:active { background: var(--champan-claro); }
.btn--linea { background: transparent; border-color: var(--champan-linea); color: var(--marfil); min-height: 44px; padding: .7rem 1.2rem; font-size: .7rem; }
.btn--linea .ico { color: var(--champan); width: 1.05rem; height: 1.05rem; }
.btn--linea:active { border-color: var(--champan); background: rgba(200, 174, 125, .08); }
.btn--ancho { width: 100%; }

/* Enlace de texto: una línea tenue de base y, al pasar el cursor, una línea plena que se traza de izquierda
   a derecha y se retira hacia la derecha (como una pluma que pasa). */
.enlace {
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem 0; font-size: .78rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--marfil);
}
.enlace::after, .enlace::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px; background: currentColor;
}
.enlace::after { opacity: .35; }
.enlace::before { transform: scaleX(0); transform-origin: right center; transition: transform .45s var(--suave); }
.enlace .ico { width: 1rem; height: 1rem; transition: transform var(--t-hover) var(--suave); }
.enlace:active::before { transform: scaleX(1); transform-origin: left center; }

@media (hover: hover) and (pointer: fine) {
  .btn--primario:hover { background: var(--champan-claro); }
  .btn--linea:hover { border-color: var(--champan); background: rgba(200, 174, 125, .08); }
  .enlace:hover::before { transform: scaleX(1); transform-origin: left center; }
  .enlace:hover .ico { transform: translateY(2px); }
  .enlace:hover .ico[data-dir], .mensaje .enlace:hover .ico { transform: translateX(3px); }
}

/* ---------- Encabezado ---------- */

.nav { position: fixed; inset: 0 0 auto; z-index: 50; }
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(20, 21, 25, .96); border-bottom: 1px solid rgba(200, 174, 125, .16);
  opacity: 0; transition: opacity var(--t-estado) var(--suave);
}
.nav.is-solida::before { opacity: 1; }
/* La barra se compacta al desplazarse. Es fija, así que el cambio de alto no mueve el contenido de la página;
   fondo, alto y monograma comparten duración y curva para leerse como un solo objeto. */
.nav__barra { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: var(--nav-alto); transition: height var(--t-estado) var(--suave); }
.nav.is-solida .nav__barra { height: 70px; }

.marca { display: inline-flex; align-items: center; gap: .9rem; }
.marca__mono { width: 46px; height: auto; transform-origin: left center; transition: transform var(--t-estado) var(--suave); }
.nav.is-solida .marca__mono { transform: scale(.87); }
.marca__texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca__nombre { font-family: var(--f-titulo); font-size: 1.05rem; font-weight: 500; letter-spacing: .06em; color: var(--marfil); }
.marca__rubro { margin-top: .3rem; font-family: var(--f-titulo); font-size: .7rem; letter-spacing: .42em; text-transform: uppercase; color: var(--champan); }

.nav__menu { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem); }
.nav__links { display: flex; gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.nav__links a {
  position: relative; display: inline-block; padding: .5rem 0;
  font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--marfil-80);
  transition: color var(--t-hover) var(--suave);
}
/* La sección actual se marca con la regla que se traza desde el centro, el gesto del logo. */
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .25rem; height: 1px; background: var(--champan);
  transform: scaleX(0); transition: transform .45s var(--suave);
}
.nav__links a[aria-current="true"] { color: var(--marfil); }
.nav__links a[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--marfil); }
  .nav__links a:hover::after { transform: scaleX(1); }
}

.nav__abrir { display: none; width: 48px; height: 48px; margin-right: -10px; padding: 0; border: 0; background: none; cursor: pointer; }
/* El ícono se transforma en cruz con una curva de ida y vuelta: es un cambio de forma en el lugar, no una entrada. */
.nav__abrir-lineas, .nav__abrir-lineas::before {
  display: block; width: 26px; height: 1px; margin-inline: auto; background: var(--marfil);
  transition: transform .34s var(--morfo), width .34s var(--morfo);
}
.nav__abrir:active .nav__abrir-lineas { opacity: .7; }
.nav__abrir-lineas { position: relative; transform: translateY(-4px); }
.nav__abrir-lineas::before { content: ""; position: absolute; left: 0; top: 8px; width: 18px; margin: 0; }
.nav__abrir[aria-expanded="true"] .nav__abrir-lineas { transform: rotate(45deg); }
.nav__abrir[aria-expanded="true"] .nav__abrir-lineas::before { width: 26px; transform: translateY(-8px) rotate(-90deg); }

.menu-movil {
  position: fixed; inset: 0; z-index: -2;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-alto) + 2rem) var(--margen) calc(2rem + env(safe-area-inset-bottom));
  background: var(--carbon);
  opacity: 0; visibility: hidden; transition: opacity .22s var(--suave), visibility 0s linear .22s;
}
.menu-movil[hidden] { display: flex; }
/* Abrir es deliberado y algo más largo; cerrar responde rápido y todo se va junto, sin escalonar. */
/* "visibility 0s" explícito: con "reducir movimiento" la visibilidad sigue cambiando al instante y el foco puede entrar al menú. */
.menu-movil.is-abierto { opacity: 1; visibility: visible; transition: opacity .36s var(--suave), visibility 0s; }
.menu-movil__links li { border-bottom: 1px solid var(--marfil-linea); }
.menu-movil__links a {
  display: block; padding: 1.1rem 0; font-family: var(--f-serif); font-size: 2.1rem; line-height: 1.2; color: var(--marfil);
  transform: translateY(10px); opacity: 0; transition: transform .2s var(--suave), opacity .2s var(--suave), color .2s;
}
.menu-movil.is-abierto .menu-movil__links a { transform: none; opacity: 1; transition: transform .55s var(--suave) .04s, opacity .45s var(--suave) .04s, color .2s; }
.menu-movil.is-abierto .menu-movil__links li:nth-child(2) a { transition-delay: .09s, .09s, 0s; }
.menu-movil.is-abierto .menu-movil__links li:nth-child(3) a { transition-delay: .13s, .13s, 0s; }
.menu-movil__links a:active { color: var(--champan-claro); }
.menu-movil__datos { display: flex; flex-direction: column; gap: .35rem; margin-top: 1.5rem; font-size: .95rem; color: var(--marfil-62); }
.menu-movil__datos a { color: var(--marfil-80); }

/* ---------- Portada ---------- */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto;
  min-height: 100vh; min-height: 100svh;
  background: var(--carbon);
}
.hero__foto {
  position: absolute; inset: 0 0 0 clamp(0px, 30vw - 200px, 20%); z-index: -2;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}
.hero__foto picture, .hero__foto img { width: 100%; height: 100%; }
.hero__foto img {
  object-fit: cover; object-position: 66% 42%;
  filter: sepia(.32) saturate(1.18) brightness(.9) contrast(1.05);
}
.hero__velo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 65% at 8% 12%, rgba(176, 128, 66, .18), transparent 70%),
    linear-gradient(90deg, rgba(13, 14, 17, .93) 0%, rgba(13, 14, 17, .84) 28%, rgba(13, 14, 17, .45) 55%, rgba(13, 14, 17, .08) 76%, rgba(13, 14, 17, .28) 100%),
    linear-gradient(0deg, var(--carbon) 0%, rgba(20, 21, 25, 0) 26%),
    linear-gradient(180deg, rgba(13, 14, 17, .7) 0%, rgba(13, 14, 17, 0) 20%);
}

/* La portada ocupa exactamente la pantalla disponible: tamaños y separaciones responden al ancho y también al alto
   (svh = alto visible con las barras del navegador), para que el botón principal entre completo en notebooks bajas. */
.hero__cuerpo {
  display: flex; align-items: center;
  padding-top: calc(var(--nav-alto) + clamp(1rem, 4.5vh, 2.5rem)); padding-bottom: clamp(1.5rem, 5.3vh, 3rem);
  padding-top: calc(var(--nav-alto) + clamp(1rem, 4.5svh, 2.5rem)); padding-bottom: clamp(1.5rem, 5.3svh, 3rem);
}
.hero__contenido { max-width: 40rem; }
.hero__nombre {
  font-family: var(--f-titulo); font-weight: 500;
  font-size: clamp(2.75rem, min(1.2rem + 4.9vw, 11.5vh), 5.5rem);
  font-size: clamp(2.75rem, min(1.2rem + 4.9vw, 11.5svh), 5.5rem);
  line-height: .98; letter-spacing: .015em; color: var(--marfil);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.hero__nombre span { display: block; }

.sello { display: flex; align-items: center; gap: 1.1rem; max-width: 33rem; margin-top: clamp(1.1rem, .8rem + .8vw, 1.6rem); }
.sello__regla { flex: 1; height: 1px; background: var(--champan); opacity: .85; }
.sello__regla--izq { transform-origin: right center; mask-image: linear-gradient(90deg, transparent, #000 70%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); }
.sello__regla--der { transform-origin: left center; mask-image: linear-gradient(270deg, transparent, #000 70%); -webkit-mask-image: linear-gradient(270deg, transparent, #000 70%); }
.sello__texto {
  font-family: var(--f-titulo); font-weight: 500; font-size: clamp(.78rem, .7rem + .3vw, .98rem);
  letter-spacing: .42em; margin-right: -.42em; text-transform: uppercase; color: var(--champan); white-space: nowrap;
}

.hero__lema {
  max-width: 24ch;
  margin-top: clamp(1.25rem, min(1.2rem + 1.4vw, 4.2vh), 2.5rem);
  margin-top: clamp(1.25rem, min(1.2rem + 1.4vw, 4.2svh), 2.5rem);
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.9rem); line-height: 1.3; color: var(--marfil);
  text-wrap: balance;
}
.hero__acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.25rem;
  margin-top: clamp(1.5rem, min(1.6rem + 1.8vw, 5.6vh), 3.25rem);
  margin-top: clamp(1.5rem, min(1.6rem + 1.8vw, 5.6svh), 3.25rem);
}

.hero__pie {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap;
  padding-block: clamp(.9rem, 2.1vh, 1.25rem) clamp(1.1rem, 2.7vh, 1.6rem);
  padding-block: clamp(.9rem, 2.1svh, 1.25rem) clamp(1.1rem, 2.7svh, 1.6rem);
  font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--marfil-62);
  position: relative;
}
.hero__pie::before { content: ""; position: absolute; top: 0; left: var(--margen); right: var(--margen); height: 1px; background: var(--marfil-linea); }
.hero__pie-datos { display: flex; gap: .5rem 2.5rem; flex-wrap: wrap; }
.hero__pie-datos a { transition: color var(--t-hover) var(--suave); }
.hero__pie-datos a:active { color: var(--champan-claro); }
@media (hover: hover) and (pointer: fine) { .hero__pie-datos a:hover { color: var(--champan-claro); } }

/* Entrada de la portada: el contenido es visible por defecto; solo se anima con JS y sin "reducir movimiento".
   Una ola, no una fila: el nombre (protagonista) entra primero, recorre más y es el único con desenfoque; la frase
   y las acciones lo siguen con menos recorrido; el sello y la franja inferior solo aparecen. Los escalones se
   acortan a medida que avanza y el botón está visible a los 0,6 s y en reposo antes de 1,3 s. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__foto img { animation: asentar 2.6s var(--suave) both; }
  .js .hero .r { animation: aparecer .9s var(--suave) both; }
  .js .hero .hero__nombre { animation: aparecer-nombre 1.1s var(--suave) .1s both; }
  .js .hero .sello { animation-name: aparecer-quieto; animation-duration: .8s; animation-delay: .3s; }
  .js .hero .hero__lema { --sube: 10px; animation-delay: .42s; }
  .js .hero .hero__acciones { --sube: 8px; animation-duration: .8s; animation-delay: .52s; }
  .js .hero .hero__pie { animation-name: aparecer-quieto; animation-duration: .8s; animation-delay: .7s; }
  .js .sello__regla { animation: trazar 1.2s var(--suave) .34s both; }
}
@keyframes asentar { from { transform: scale(1.05); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes aparecer-nombre { from { opacity: 0; transform: translateY(16px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(var(--sube, 10px)); } to { opacity: 1; transform: none; } }
@keyframes aparecer-quieto { from { opacity: 0; } to { opacity: 1; } }
@keyframes trazar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- El estudio ---------- */

.estudio { background: var(--papel); color: var(--tinta); padding-block: clamp(4.5rem, 3rem + 5vw, 7.5rem); }
.estudio__intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: start; }
.estudio__titulo {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.9rem); line-height: 1.06; letter-spacing: -.012em;
  text-wrap: balance;
}
.estudio__texto { max-width: 34rem; padding-top: .6rem; color: var(--tinta-2); font-size: 1.125rem; line-height: 1.75; }
.estudio__texto p + p { margin-top: 1.25em; }
.firma { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem !important; padding-top: 1.75rem; border-top: 1px solid var(--tinta-linea); }
.firma__nombre { font-family: var(--f-titulo); font-size: 1.1rem; font-weight: 500; letter-spacing: .05em; color: var(--tinta); }
.firma__rubro { font-family: var(--f-titulo); font-size: .72rem; letter-spacing: .4em; text-transform: uppercase; color: var(--oro-tinta); }
.firma__rubro::before { content: ""; display: inline-block; width: 2rem; height: 1px; margin-right: 1rem; vertical-align: middle; background: var(--oro-tinta); opacity: .7; }

/* Los tres términos de la frase, en tres columnas bajo una misma regla: un subgrid alinea las descripciones
   aunque «Defensa de tus derechos» ocupe dos líneas. */
.principios {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto;
  column-gap: clamp(2rem, 4.5vw, 5rem);
  margin-top: clamp(3.5rem, 2.5rem + 3.5vw, 5.5rem);
}
.principio {
  position: relative;
  display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: .9rem;
  padding-top: clamp(1.4rem, 1rem + 1vw, 2rem);
}
.principio::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--tinta-linea);
  transform-origin: left center;
}
.principio dt {
  align-self: end;
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(1.65rem, 1.15rem + 1.35vw, 2.4rem); line-height: 1.1; letter-spacing: -.01em; color: var(--tinta);
  text-wrap: balance;
}
.principio dt em { font-style: italic; color: var(--oro-tinta); }
.principio dd { max-width: 34ch; color: var(--tinta-2); font-size: 1.0625rem; line-height: 1.65; }

/* ---------- Contacto ---------- */

.contacto { position: relative; padding-block: var(--seccion); background: var(--carbon); }
.contacto__grilla { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
.contacto__titulo {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4.4rem); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance;
}
.contacto__bajada { max-width: 34rem; margin-top: 1.5rem; color: var(--marfil-80); font-size: 1.125rem; line-height: 1.7; }

.mensaje { max-width: 36rem; margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem); }
.campo + .campo { margin-top: 1.75rem; }
.campo label { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--marfil-62); }
.campo input, .campo textarea {
  display: block; width: 100%; margin-top: .4rem; padding: .55rem 0 .7rem;
  background: transparent; border: 0; border-bottom: 1px solid rgba(239, 232, 218, .26); border-radius: 0;
  font-family: var(--f-serif); font-size: 1.35rem; line-height: 1.4; color: var(--marfil); caret-color: var(--champan);
  transition: border-color var(--t-hover) var(--suave), box-shadow var(--t-hover) var(--suave);
}
.campo textarea { resize: vertical; min-height: 6.2rem; }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(239, 232, 218, .5); font-style: italic; transition: opacity var(--t-hover) var(--suave); }
.campo input:focus::placeholder, .campo textarea:focus::placeholder { opacity: .55; }
.campo label { transition: color var(--t-hover) var(--suave); }
.campo:focus-within label { color: var(--champan); }
@media (hover: hover) and (pointer: fine) {
  .campo input:hover, .campo textarea:hover { border-bottom-color: rgba(239, 232, 218, .45); }
}
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--champan); }
.campo input:focus-visible, .campo textarea:focus-visible { box-shadow: 0 1px 0 var(--champan); }
.mensaje__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.25rem; margin-top: 2.25rem; }
.mensaje__nota { margin-top: 1.25rem; font-size: .875rem; color: var(--marfil-62); }

.placa { padding: 6px; border: 1px solid var(--champan-linea); background: var(--carbon-alto); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.placa__interior { border: 1px solid rgba(200, 174, 125, .16); padding: clamp(1.75rem, 1.2rem + 2vw, 3rem) clamp(1.4rem, 1rem + 1.6vw, 2.6rem); }
.placa__cabecera { text-align: center; padding-bottom: 2rem; }
.placa__cabecera img { width: 64px; margin: 0 auto 1.1rem; }
.placa__nombre { font-family: var(--f-titulo); font-weight: 500; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); letter-spacing: .05em; line-height: 1.2; }
.placa__rubro {
  display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: .65rem;
  font-family: var(--f-titulo); font-size: .72rem; letter-spacing: .42em; text-transform: uppercase; color: var(--champan);
}
.placa__rubro::before, .placa__rubro::after { content: ""; width: 2.25rem; height: 1px; background: var(--champan); opacity: .7; }

.canal {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.1rem;
  padding: 1.2rem 0; border-top: 1px solid var(--marfil-linea);
}
.canal__ico { width: 1.3rem; height: 1.3rem; color: var(--champan); }
.canal__texto { display: flex; flex-direction: column; min-width: 0; }
.canal__rotulo { font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--marfil-62); }
.canal__valor { margin-top: .15rem; font-family: var(--f-serif); font-size: 1.4rem; line-height: 1.25; color: var(--marfil); transition: color var(--t-hover) var(--suave); }
.canal__valor--correo { font-size: clamp(1.02rem, .9rem + .4vw, 1.22rem); overflow-wrap: anywhere; }
.canal__extra { font-size: .9rem; color: var(--marfil-62); }
.canal__accion {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--champan);
  white-space: nowrap;
}
.canal__accion .ico { width: .95rem; height: .95rem; transition: transform var(--t-hover) var(--suave); }
/* Al tocar una fila en celular, el dato se ilumina en el acto (no hay hover que lo anticipe). */
a.canal:active .canal__valor { color: var(--champan-claro); transition-duration: var(--t-presion); }

/* WhatsApp y teléfono comparten una fila: el número aparece una sola vez y WhatsApp es el acceso principal de la placa. */
.canal--principal { row-gap: 1.25rem; padding-bottom: 1.6rem; }
.canal--principal .canal__accion { min-height: 44px; transition: color var(--t-hover) var(--suave); }
.canal--principal .canal__accion:active { color: var(--champan-claro); }
.canal__wa { grid-column: 1 / -1; }

@media (hover: hover) and (pointer: fine) {
  a.canal:hover .canal__valor { color: var(--champan-claro); }
  a.canal:hover .canal__accion .ico, a.canal__accion:hover .ico { transform: translateX(4px); }
  .canal--principal .canal__accion:hover { color: var(--champan-claro); }
}

/* ---------- Pie ---------- */

.pie { background: var(--carbon-hondo); color: var(--marfil-62); border-top: 1px solid rgba(200, 174, 125, .12); }
.pie__cuerpo { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: clamp(4rem, 3rem + 4vw, 6.5rem) clamp(3rem, 2.5rem + 2vw, 4.5rem); }
.pie__logo { width: clamp(240px, 200px + 10vw, 360px); }
.pie__lema { margin-top: 2.25rem; font-family: var(--f-serif); font-style: italic; font-size: 1.3rem; color: var(--marfil-80); }
.pie__datos { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.5rem; margin-top: 2rem; font-size: .95rem; }
.pie__datos a { color: var(--marfil-80); transition: color var(--t-hover) var(--suave); }
.pie__datos a:active { color: var(--champan-claro); }
.pie__base { border-top: 1px solid var(--marfil-linea); }
.pie__base-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 2rem; padding-block: 1.5rem; font-size: .8rem; }
.pie__credito a, .pie__arriba { color: var(--marfil-62); text-decoration: underline; text-decoration-color: rgba(239, 232, 218, .25); text-underline-offset: 4px; transition: color var(--t-hover) var(--suave), text-decoration-color var(--t-hover) var(--suave); }
.pie__credito a:active, .pie__arriba:active { color: var(--marfil); text-decoration-color: var(--champan); }
@media (hover: hover) and (pointer: fine) {
  .pie__datos a:hover { color: var(--champan-claro); }
  .pie__credito a:hover, .pie__arriba:hover { color: var(--marfil); text-decoration-color: var(--champan); }
}

/* ---------- WhatsApp flotante ---------- */

.wa-flotante {
  position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 1px;
  background: var(--champan); color: var(--carbon);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.96);
  /* Se retira rápido (la sección de contacto ya ofrece WhatsApp) y aparece con algo más de calma. */
  transition: opacity .24s var(--suave), transform .24s var(--suave), visibility 0s linear .24s, background-color var(--t-hover) var(--suave);
}
.wa-flotante .ico { width: 1.6rem; height: 1.6rem; stroke-width: 1.6; }
.wa-flotante.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--suave), transform .5s var(--suave), background-color var(--t-hover) var(--suave); }
.wa-flotante.is-visible:active { transform: scale(.95); background: var(--champan-claro); transition-duration: var(--t-presion); }
@media (hover: hover) and (pointer: fine) { .wa-flotante:hover { background: var(--champan-claro); } }
html:not(.js) .wa-flotante { opacity: 1; visibility: visible; transform: none; }
/* En escritorio el acceso a WhatsApp ya está siempre en el encabezado. */
@media (min-width: 761px) { .wa-flotante { display: none; } }

/* ---------- Aparición al desplazarse ---------- */

/* Un solo gesto por sección: el título (protagonista) sube 12px y aparece; el texto que lo acompaña aparece en su
   lugar un instante después; las reglas se trazan desde el centro, como en el sello del logo. Los tres principios
   entran como una ola corta y desigual (0 / 70 / 120 ms), no los tres a la vez ni con un metrónomo. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-revelar] {
    opacity: 0;
    transition: opacity .8s var(--suave) var(--retraso, 0s), transform 1s var(--suave) var(--retraso, 0s);
  }
  .js [data-revelar].is-visible { opacity: 1; transform: none; }
  .js .estudio__titulo[data-revelar], .js .contacto__titulo[data-revelar] { transform: translateY(12px); }
  .js .estudio__texto[data-revelar] { --retraso: .1s; }
  .js .contacto__bajada[data-revelar] { --retraso: .08s; }
  .js .placa[data-revelar] { --retraso: .12s; }
  .js .mensaje[data-revelar] { --retraso: .16s; }
  .js .principio:nth-child(2) { --retraso: .07s; }
  .js .principio:nth-child(3) { --retraso: .12s; }

  .js .principio::before { transform: scaleX(0); transform-origin: center; transition: transform 1.2s var(--suave) calc(var(--retraso, 0s) + .05s); }
  .js .principio.is-visible::before { transform: scaleX(1); }
  .js .principio dd { opacity: 0; transition: opacity .8s var(--suave) calc(var(--retraso, 0s) + .22s); }
  .js .principio.is-visible dd { opacity: 1; }
  .js .firma__rubro::before { transform: scaleX(0); transform-origin: right center; transition: transform 1.1s var(--suave) .35s; }
  .js .is-visible .firma__rubro::before { transform: none; }
  .js .placa__rubro::before { transform: scaleX(0); transform-origin: right center; transition: transform 1.1s var(--suave) .4s; }
  .js .placa__rubro::after { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--suave) .4s; }
  .js .placa.is-visible .placa__rubro::before, .js .placa.is-visible .placa__rubro::after { transform: none; }
}
/* Reducir movimiento: sin desplazamientos, escalas ni trazos; se conservan los fundidos de opacidad y color, que
   ayudan a leer los cambios de estado sin mover nada. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-property: opacity, color, background-color, border-color, text-decoration-color, visibility !important;
  }
}

/* ---------- Adaptación ---------- */

@media (max-width: 1080px) {
  .nav__links { display: none; }
}

@media (max-width: 900px) {
  .estudio__intro, .principios, .contacto__grilla { grid-template-columns: minmax(0, 1fr); }
  .estudio__texto { padding-top: 0; }
  .principios { grid-template-rows: none; }
  .principio { display: block; padding-block: 1.5rem; }
  .principio dd { margin-top: .6rem; }
  .placa { max-width: 34rem; }
  /* En pantallas angostas los canales directos van antes que el mensaje. */
  .contacto__grilla { display: flex; flex-direction: column; gap: 0; }
  .contacto__principal { display: contents; }
  .contacto__titulo, .contacto__bajada { order: 0; }
  .placa { order: 1; width: 100%; margin-top: 2.5rem; }
  .mensaje { order: 2; width: 100%; margin-top: 3.5rem; }
}

@media (max-width: 760px) {
  :root { --nav-alto: 72px; }
  .nav__menu { display: none; }
  /* Sin JavaScript el menú no podría abrirse: el botón solo aparece cuando funciona. */
  .js .nav__abrir { display: block; }
  .nav.is-solida .nav__barra { height: 64px; }
  .marca__mono { width: 38px; }
  .marca__nombre { font-size: .95rem; }
  .marca__rubro { font-size: .69rem; letter-spacing: .3em; }
  .nav.is-abierta::before { opacity: 0; }
}

@media (max-width: 700px) {
  /* En celular la foto ocupa la parte superior con el encuadre de la estatua y la balanza completas (la misma imagen
     de escritorio, recortada sobre el motivo), y se funde hacia el carbón donde está el texto. */
  .hero__foto {
    inset: 0 0 auto 0; height: min(140vw, 66vh); height: min(140vw, 66svh);
    -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
  }
  .hero__foto img { object-position: 66.7% 0; filter: sepia(.32) saturate(1.18) brightness(1) contrast(1.05); }
  .hero__velo {
    background:
      radial-gradient(80% 45% at 15% 10%, rgba(176, 128, 66, .14), transparent 70%),
      linear-gradient(0deg, var(--carbon) 0%, rgba(13, 14, 17, .9) 32%, rgba(13, 14, 17, .5) 46%, rgba(13, 14, 17, .14) 60%, rgba(13, 14, 17, .06) 84%, rgba(13, 14, 17, .6) 100%);
  }
  .hero__cuerpo { align-items: flex-end; padding-top: calc(var(--nav-alto) + 4rem); padding-bottom: 2rem; }
  .hero__contenido { width: 100%; }
  .sello { max-width: 22rem; gap: .8rem; }
  .sello__texto { letter-spacing: .34em; margin-right: -.34em; }
  .hero__acciones { flex-direction: column; align-items: stretch; gap: .6rem; }
  .hero__acciones .btn { width: 100%; }
  .hero__acciones .enlace { align-self: center; }
  .hero__pie { justify-content: center; text-align: center; padding-block: 1rem 1.25rem; }
  .hero__pie-lema { display: none; }
  .hero__pie-datos { justify-content: center; gap: .35rem 1.5rem; }
  .mensaje__acciones { flex-direction: column; align-items: stretch; }
  .mensaje__acciones .btn { width: 100%; }
  .mensaje__acciones .enlace { align-self: center; }
  .placa__rubro { gap: .7rem; letter-spacing: .3em; white-space: nowrap; }
  .placa__rubro::before, .placa__rubro::after { width: 1.25rem; }
  .canal { grid-template-columns: auto minmax(0, 1fr); }
  .canal__accion { grid-column: 2; margin-top: -.35rem; }
  .canal__wa { gap: .6rem; padding-inline: .75rem; letter-spacing: .12em; white-space: nowrap; }
  .pie__base-fila { flex-direction: column; text-align: center; }
  .wa-flotante { width: 52px; height: 52px; }
}