/* Costa Blanca Property Photo
 * ────────────────────────────
 * Dirección: "cal y sombra". Fondo de cal, tinta casi negra, cero color de
 * acento: el único color de la página lo ponen las fotografías. El énfasis se
 * consigue con sombra dura desplazada, sin desenfoque — la sombra de mediodía
 * traducida a una decisión de layout, no a un degradado.
 */

/* ── Fuentes ───────────────────────────────────────────────────────────────
 * Self-hosted a propósito: una petición menos a un tercero, sin exponer la IP
 * del visitante a Google (relevante con público alemán y RGPD) y sin depender
 * de una red externa para que el sitio se vea bien.
 */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-var.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-latin-var.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --cal:    #FAFAF9;   /* fondo: blanco de cal, no amarillea */
  --cal-2:  #F2F0EC;   /* fondo alterno, huecos de imagen */
  --tinta:  #12110F;   /* texto principal */
  --piedra: #5F5C56;   /* texto secundario — 6.4:1 sobre --cal */
  --linea:  #DFDCD5;   /* filetes de 1px */

  /* Una sola luz en toda la página: misma dirección, misma densidad y nunca
   * desenfoque. Los tamaños dependen del peso del elemento (control o
   * superficie) y lo que se levanta suma su alza a la sombra, de modo que la
   * sombra se queda donde estaba y lo que se separa del suelo es el objeto. */
  --alza: 6px;
  --sombra:       16px 16px 0 -1px rgba(18, 17, 15, .13);  /* superficie apoyada */
  --sombra-alta:  22px 22px 0 -1px rgba(18, 17, 15, .13);  /* superficie + --alza */
  --sombra-boton:  8px  8px 0 -1px rgba(18, 17, 15, .13);  /* control levantado 2px */

  --display: 'Archivo', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --body: 'Instrument Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;

  --fs-xs:   .8125rem;
  --fs-sm:   .9375rem;
  --fs-base: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --fs-lead: clamp(1.125rem, 1.02rem + .5vw, 1.375rem);
  --fs-h3:   clamp(1.125rem, 1.03rem + .5vw, 1.375rem);
  --fs-h2:   clamp(1.75rem, 1.28rem + 2.1vw, 3rem);
  --fs-h1:   clamp(2.6rem, 1.4rem + 5.6vw, 5.75rem);

  --pad: clamp(1.25rem, 4vw, 3rem);
  --seccion: clamp(4.5rem, 9vw, 9rem);
  --ancho: 1360px;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* que el header fijo no tape el ancla */
}

body {
  margin: 0;
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-synthesis-weight: none;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* ninguna sombra desplazada debe generar scroll lateral */
}

/* Nada de esperar 300 ms a que el navegador descarte un doble toque, y nada de
 * rectángulo azul del sistema: el feedback lo damos nosotros y al instante. */
a, button, input, textarea, label, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

img, picture, svg { display: block; max-width: 100%; }
/* display:grid en una clase gana a [hidden] si no se fuerza. */
[hidden] { display: none !important; }
img { height: auto; background-color: var(--cal-2); }

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--piedra); }

::selection { background: var(--tinta); color: var(--cal); }

/* El foco no se dibuja con el borde del elemento: se dibuja fuera, separado, para
 * que se lea igual sobre una foto que sobre el fondo. */
:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

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

.skip {
  position: absolute; left: var(--pad); top: -4rem; z-index: 100;
  background: var(--tinta); color: var(--cal);
  padding: .75rem 1.25rem; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip:focus { top: .75rem; }

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

/* ── Tipografía ────────────────────────────────────────────────────────────
 * El tracking es específico de cada tamaño, nunca un valor único: al crecer, las
 * letras se leen demasiado separadas y hay que cerrarlas; al empequeñecer, hay
 * que abrirlas. El interlineado va al revés que el cuerpo — apretado en los
 * titulares, holgado en el texto corrido.
 */
.eyebrow {
  margin: 0 0 1.25rem;
  font-size: var(--fs-xs);
  letter-spacing: .16em;   /* texto diminuto en versales: necesita mucho aire */
  text-transform: uppercase;
  color: var(--piedra);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -.005em; /* por encima de 18px ya conviene cerrar un poco */
  text-wrap: pretty;
}

/* Texto de apoyo pequeño: se abre ligeramente para no empastarse. */
.hint, .card__meta, .site-footer__fine { letter-spacing: .005em; }

.shadowed { box-shadow: var(--sombra); }

.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-stretch: 92%;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.6rem;
  border: 1px solid var(--tinta);
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              box-shadow .2s var(--ease), transform .2s var(--ease);
}
.btn--ink { background: var(--tinta); color: var(--cal); }
/* El hover solo donde hay puntero de verdad: en táctil se quedaba "pegado"
 * después de pulsar. */
@media (hover: hover) {
  .btn--ink:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-boton); }
}
.btn--ink:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: var(--sombra-boton);
}
/* Respuesta al pulsar, no al soltar: el botón se hunde en el mismo frame en que
 * baja el dedo. Sin esto la interfaz parece muerta aunque el clic funcione. */
.btn:active {
  transform: scale(.97);
  box-shadow: none;
  transition-duration: 90ms;
}
/* Sin padding lateral: cuando los dos botones se apilan en móvil, este tiene que
 * alinear con el margen, no quedar sangrado medio centímetro. */
.btn--plain { border-color: transparent; padding-inline: 0; }
.btn--plain:hover { border-bottom-color: var(--tinta); }

/* ── Header ───────────────────────────────────────────────────────────────── */
/* El filete no está siempre: aparece solo cuando hay contenido pasando por
 * debajo. Arriba del todo, una línea que no separa nada es ruido. */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: transparent;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--cal) 86%, transparent);
  border-bottom-color: var(--linea);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.25rem;
}

/* El logotipo se mide por la altura y el ancho lo pone su proporción (1111:198).
 * El SVG de la web va recortado a la tinta, así que esa altura es logo de verdad
 * y su borde izquierdo cae justo en el margen de la retícula. La hoja de marca
 * pide 120px de ancho mínimo: aquí son 143px en el extremo bajo del clamp. El
 * fondo hay que anularlo porque la regla general de img pinta --cal-2 debajo. */
.brand {
  display: flex; align-items: center;
  margin-right: auto;
  text-decoration: none;
}
.brand__logo {
  height: clamp(1.6rem, 1.4rem + .6vw, 2rem);
  width: auto;
  background: none;
}

.site-nav { display: none; gap: 1.75rem; font-size: var(--fs-sm); }
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }

.site-header__actions { display: flex; align-items: center; gap: 1rem; }

.lang { display: flex; align-items: center; gap: .1rem; font-size: var(--fs-sm); color: var(--piedra); }
/* ES/EN son dos palabras diminutas: la zona pulsable se agranda hasta los 44px
 * que pide un dedo, sin que el diseño cambie de aspecto. Los márgenes negativos
 * evitan que ese área extra separe el toggle del resto de la cabecera. */
.lang button {
  font: inherit; font-variant-numeric: tabular-nums;
  background: none; border: 0; cursor: pointer;
  color: var(--piedra);
  min-width: 2.75rem; min-height: 2.75rem;
  padding: 0; margin-block: -.75rem;
  transition: color .15s var(--ease), transform .15s var(--ease);
}
.lang button:active { transform: scale(.92); transition-duration: 90ms; }
.lang button[aria-pressed="true"] { color: var(--tinta); font-weight: 600; }
.lang :first-child { margin-left: -.6rem; }

.site-header__cta { display: none; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
/* El hueco inferior lo pone ya el padding superior de la siguiente sección:
 * duplicarlo dejaba una franja muerta de 260px entre el hero y el portfolio. */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 3vw, 3rem); }
.hero__inner { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
/* La foto va a sangre y el texto se alinea solo con la retícula. El margen se
 * calcula con % del ancho de la sección, no con vw: con vw, la barra de scroll
 * desalinearía el texto respecto a la cabecera. */
.hero__text { padding-inline: var(--pad); }

.hero__title {
  font-size: var(--fs-h1);
  font-stretch: 84%;
  /* .92 chocaba: en español el rabo de la J de ALOJAMIENTOS tocaba la tilde de
   * TURÍSTICOS en la línea siguiente. */
  line-height: .98;
  letter-spacing: -.012em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.hero__text .lead { max-width: 46ch; color: var(--piedra); }
.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* A sangre no lleva sombra: la sombra es de lo que se apoya sobre la página, y
 * esta foto ya no se apoya, se sale. */
.hero__media { margin: 0; }
.hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ── Secciones ────────────────────────────────────────────────────────────── */
.section { padding-block: var(--seccion); }
.section--rule > .wrap { border-top: 1px solid var(--linea); padding-top: var(--seccion); }
.section--rule { padding-top: 0; }

.section__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__title {
  font-size: var(--fs-h2);
  font-stretch: 88%;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.section__lead { margin-top: 1.25rem; color: var(--piedra); }

/* ── Portfolio ────────────────────────────────────────────────────────────── */
.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.25rem);
}

.card { display: block; text-decoration: none; }
.card__media {
  display: block; overflow: hidden;
  /* Dos gestos independientes en la misma transformación: el levantamiento del
   * hover y el hundimiento de la pulsación. */
  transform: translate(var(--lift, 0), var(--lift, 0)) scale(var(--press, 1));
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* En reposo, ninguna sombra: ocho rectángulos flotando serían ruido y las
 * fotos dejarían de respirar. La sombra aparece solo al señalar la tarjeta, y
 * cuando aparece es la misma luz del resto de la página: la tarjeta se levanta
 * --alza y su sombra crece exactamente --alza, así que cae donde caería la de
 * cualquier otra superficie apoyada. */
@media (hover: hover) {
  .card:hover .card__media { --lift: calc(-1 * var(--alza)); box-shadow: var(--sombra-alta); }
}
.card:focus-visible .card__media { --lift: calc(-1 * var(--alza)); box-shadow: var(--sombra-alta); }

/* Al pulsar, la tarjeta cede bajo el dedo en el acto. En táctil este es el único
 * feedback que existe antes de que se abra la galería. */
.card:active .card__media {
  --press: .985; --lift: -2px;
  transition-duration: 90ms;
}

.card__body { display: block; margin-top: 1.1rem; }
.card__name {
  display: block;
  font-family: var(--display); font-weight: 600; font-stretch: 90%;
  font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.008em;
}
.card__meta, .card__count {
  display: block; font-size: var(--fs-sm); color: var(--piedra);
}
.card__count { margin-top: .35rem; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; }

/* ── Por qué importa ──────────────────────────────────────────────────────── */
.reasons {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(2.5rem, 4vw, 3.5rem);
}
.reason { max-width: 42ch; }
.reason__title {
  font-size: var(--fs-h3); font-stretch: 90%; line-height: 1.25;
  letter-spacing: -.008em;
  margin-bottom: .6rem;
}
.reason p { color: var(--piedra); }

/* ── Antes / después ──────────────────────────────────────────────────────── */
.ba {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center;
}
.ba__title { font-size: var(--fs-h3); font-stretch: 90%; margin-bottom: .6rem; }
.ba__text p { color: var(--piedra); max-width: 42ch; }

.ba__figure { margin: 0; position: relative; }
.ba__stack { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--cal-2); }
.ba__stack picture { position: absolute; inset: 0; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__img--after { clip-path: inset(0 0 0 var(--pos, 50%)); }

.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 2px; margin-left: -1px; background: var(--cal);
  box-shadow: 0 0 0 1px rgba(18, 17, 15, .25);
  pointer-events: none;
}
.ba__tag {
  position: absolute; bottom: .75rem;
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  background: var(--cal); color: var(--tinta); padding: .3rem .6rem;
  pointer-events: none;
}
.ba__tag--before { left: .75rem; }
.ba__tag--after { right: .75rem; }

/* El control ocupa toda la foto: se arrastra donde el ojo está mirando. */
.ba__control { position: absolute; inset: 0; display: block; }
.ba__control input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 100%; margin: 0;
  background: transparent; cursor: ew-resize;
}
/* El tirador no lleva sombra: se mueve por encima de la foto y una sombra dura
 * viajando con él parecería una segunda pieza. El relleno de cal con filete de
 * tinta ya lo separa de cualquier fondo. */
.ba__control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--cal); border: 1px solid var(--tinta);
}
.ba__control input[type="range"]::-moz-range-thumb {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--cal); border: 1px solid var(--tinta);
}
.ba__control input[type="range"]::-moz-range-track { background: transparent; }

/* ── Servicios ────────────────────────────────────────────────────────────── */
.services { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.services__label {
  font-size: var(--fs-xs); font-weight: 600; font-stretch: 100%;
  letter-spacing: .16em; text-transform: uppercase; color: var(--piedra);
  padding-bottom: .75rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--linea);
}
.services__col + .services__col .services__label:not(:first-child) { margin-top: 2.5rem; }

.spec { margin: 0; }
.spec dt {
  font-family: var(--display); font-weight: 600; font-stretch: 90%;
  font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.008em;
}
.spec dd { margin: .35rem 0 1.75rem; color: var(--piedra); max-width: 44ch; }
.spec dd:last-child { margin-bottom: 0; }

.extras { list-style: none; margin: 0 0 2rem; padding: 0; }
.extras li {
  padding: .8rem 0 .8rem 1.5rem; border-bottom: 1px solid var(--linea);
  position: relative; color: var(--piedra);
}
.extras li::before {
  content: ''; position: absolute; left: 0; top: 1.45em;
  width: .5rem; height: 1px; background: var(--tinta);
}
.services__note { color: var(--piedra); max-width: 44ch; margin: 2rem 0; }

/* ── Tarifas ───────────────────────────────────────────────────────
 * El precio es lo que primero se busca de esta sección: va en cifra grande,
 * sobre el fondo alterno y con el mismo filete que el resto. Sin color, sin
 * "tramo recomendado" y sin destacar uno de los dos — el tramo no lo elige el
 * cliente, lo elige la casa que tiene.
 */
.rates { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

/* Cada bloque de la columna arranca con su propio rótulo; el primero ya lo
 * separa el .section__head. */
.rates__main .services__label:not(:first-child),
.rates__aside .services__label:not(:first-child) { margin-top: 3rem; }

.tiers {
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: grid; gap: clamp(1.25rem, 3vw, 2rem);
}
.tier {
  background: var(--cal-2);
  border: 1px solid var(--linea);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.tier__name {
  margin: 0;
  font-family: var(--display); font-weight: 600; font-stretch: 90%;
  font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.008em;
}
/* Cifra en versal de caja alta y ancho fijo: dos precios uno al lado del otro
 * tienen que alinear por la coma, no bailar según los dígitos. */
.tier__price {
  margin: .6rem 0 0;
  font-family: var(--display); font-weight: 700; font-stretch: 85%;
  font-size: clamp(2.5rem, 1.7rem + 3vw, 3.75rem);
  line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums;
}
.tier__meta { margin: .5rem 0 0; color: var(--piedra); font-size: var(--fs-sm); }

.rates__lead { margin: 0 0 1.25rem; max-width: 52ch; }
.rates__note { color: var(--piedra); max-width: 52ch; margin: 0 0 1rem; }
.rates__sub { margin: 0 0 .35rem; font-weight: 600; }
.rates__towns {
  margin: 0 0 1.75rem; max-width: 52ch;
  color: var(--piedra); font-size: var(--fs-sm); line-height: 1.75;
}

.rate-list { margin: 0; }
.rate-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; padding: .8rem 0; border-bottom: 1px solid var(--linea);
}
.rate-row dt { color: var(--piedra); }
.rate-row dd {
  margin: 0; white-space: nowrap;
  font-family: var(--display); font-weight: 600; font-stretch: 92%;
  font-variant-numeric: lining-nums tabular-nums;
}
/* La tarifa sin descuento no se lee, se compara: se queda en gris y sin peso
 * para que la vista aterrice en la de al lado. */
.rate-was { color: var(--piedra); font-weight: 400; text-decoration: line-through; }
.rate-now { margin-left: .4rem; }

/* ── Landing de agencias (inmobiliaria.html) ─────────────────────
 * Tres piezas y ninguna idea nueva: la página es la portada con otro copy. Si
 * alguna vez hace falta un cuarto bloque aquí, probablemente sea señal de que
 * la landing se está separando del sistema y conviene pararse a mirarlo.
 */

/* La foto del hero de la landing es apaisada. El recorte 4:5 de la portada está
 * pensado para un original vertical; aplicado a este, parte la piscina. */
.hero__media--wide img { aspect-ratio: 3 / 2; }

/* "Salida múltiple" es el argumento que le importa a una agencia con varias
 * captaciones, así que es lo único de la página que se levanta del fondo. Se
 * destaca con lo que ya hay —fondo alterno, filete y la sombra de la casa— y no
 * con color: el color lo siguen poniendo las fotos. */
.trip {
  background: var(--cal-2);
  border: 1px solid var(--linea);
  padding: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 1.75rem;
}
/* Dentro de la caja, el último filete de la lista coincidiría con el borde. */
.trip .rate-row:last-child { border-bottom: 0; padding-bottom: 0; }
.trip__note { margin: 1.25rem 0 0; color: var(--piedra); font-size: var(--fs-sm); }

/* Cierre: un solo botón y, debajo, el teléfono con el peso de un dato, no el de
 * un enlace más. Quien no quiera escribir, llama. */
.cierre__actions { margin-bottom: 1.75rem; }
.cierre__phone {
  margin: 0 0 .75rem;
  font-family: var(--display); font-weight: 600; font-stretch: 92%;
  font-size: var(--fs-h3);
  font-variant-numeric: lining-nums tabular-nums;
}
.cierre__phone a { text-decoration: none; }
.cierre__phone a:hover { text-decoration: underline; }
.cierre__fine { color: var(--piedra); font-size: var(--fs-sm); }

/* ── Contacto ─────────────────────────────────────────────────────────────── */
.contact { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

/* La separación entre campos tiene que ser mayor que la que hay entre la etiqueta
 * y su propio filete; si no, la pista de ayuda parece pertenecer al campo de abajo. */
.field { display: grid; gap: .35rem; margin-bottom: 2.5rem; }
.field label { font-size: var(--fs-sm); color: var(--piedra); }
.field input[type="text"],
.field input[type="email"],
.field textarea {
  font: inherit; color: inherit;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--tinta);
  padding: .6rem 0; width: 100%;
  border-radius: 0; /* Safari iOS redondea por su cuenta */
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field textarea:focus {
  outline: none; background: color-mix(in srgb, var(--tinta) 4%, transparent);
  border-bottom-width: 2px; padding-bottom: calc(.6rem - 1px);
}
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.field [aria-invalid="true"] { border-bottom-color: #A3241B; }
.hint { font-size: var(--fs-xs); color: var(--piedra); }

.field--check { display: flex; align-items: flex-start; gap: .75rem; }
.field--check input { margin-top: .35rem; accent-color: var(--tinta); width: 1.05rem; height: 1.05rem; flex: none; }
.field--check label, .field__consent { font-size: var(--fs-sm); color: var(--piedra); }
.field--check a { color: var(--tinta); }

/* Honeypot: fuera de pantalla, nunca oculto con display:none — hay bots que
 * ignoran los campos ocultos y rellenan el resto. */
.botcheck { position: absolute; left: -9999px; opacity: 0; height: 0; }

.form__actions { margin-top: 2rem; }
.form__status { min-height: 1.5rem; font-size: var(--fs-sm); }
.form__status[data-state="ok"] { color: var(--tinta); font-weight: 600; }
.form__status[data-state="error"] { color: #A3241B; }

.direct__list { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.direct__list li { border-bottom: 1px solid var(--linea); }
.direct__list a {
  display: block; padding: .95rem 0; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-stretch: 90%;
  transition: transform .2s var(--ease);
}
/* La flecha se desplaza hacia donde lleva el enlace: el movimiento intermedio
 * apunta al resultado en vez de limitarse a decorar. */
.direct__list a::after {
  content: ' →'; color: var(--piedra);
  display: inline-block;
  transition: transform .25s var(--ease);
}
.direct__list a:hover { text-decoration: underline; }
.direct__list a:hover::after,
.direct__list a:focus-visible::after { transform: translateX(.35em); }
.direct__list a:active { transform: scale(.99); transition-duration: 90ms; }
.direct p { color: var(--piedra); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--linea);
  padding-block: clamp(3rem, 6vw, 5rem);
  font-size: var(--fs-sm); color: var(--piedra);
}
/* El pie cierra con el logotipo completo, no con el nombre compuesto a mano.
 * Algo mayor que el de la cabecera: aquí no compite con nada. */
.site-footer__brand { margin-bottom: 1.25rem; }
.site-footer__brand img {
  height: clamp(1.9rem, 1.6rem + .9vw, 2.4rem);
  width: auto;
  background: none;
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; }
.site-footer__fine { margin-top: 1.5rem; font-size: var(--fs-xs); }

/* ── Páginas de texto (aviso legal, privacidad) ───────────────────────────── */
.prose { max-width: 68ch; padding-block: var(--seccion); }
.prose__title {
  font-size: var(--fs-h2); font-stretch: 88%; line-height: 1.05;
  letter-spacing: -.01em; margin-bottom: 1rem;
}
.prose h2 {
  font-size: var(--fs-h3); font-stretch: 90%; line-height: 1.25;
  margin: 2.75rem 0 .75rem;
}
.prose h3 { font-size: var(--fs-base); margin: 1.75rem 0 .5rem; }
.prose p, .prose li { color: var(--piedra); }
.prose ul { padding-left: 1.2rem; margin: 0 0 1em; }
.prose li { margin-bottom: .4rem; }
.prose__date { font-size: var(--fs-sm); color: var(--piedra); }
/* Los huecos que hay que rellenar se ven a simple vista. */
.todo {
  background: color-mix(in srgb, var(--tinta) 8%, transparent);
  padding: .1em .4em; color: var(--tinta); font-weight: 600;
}
.prose__back { display: inline-block; margin-top: 3rem; font-size: var(--fs-sm); }

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.lightbox {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0;
  background: #0D0C0B; color: var(--cal);
  overflow: hidden;
  /* La galería crece desde la tarjeta que la abrió: js/main.js escribe aquí el
   * centro de esa tarjeta antes de animar. Si algo desapareciera por un sitio y
   * volviera por otro, se perdería la relación entre el botón y su contenido. */
  transform-origin: var(--origen-x, 50%) var(--origen-y, 50%);
}
.lightbox::backdrop { background: rgba(13, 12, 11, .96); }

.lightbox__bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem var(--pad);
}
.lightbox__title {
  margin: 0; font-family: var(--display); font-weight: 600; font-stretch: 90%;
  text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-sm);
}
.lightbox__counter {
  margin: 0 0 0 auto; font-size: var(--fs-xs); color: #A8A49C;
  font-variant-numeric: tabular-nums;
}
.lightbox__btn {
  font: inherit; font-size: 1.25rem; line-height: 1;
  background: none; border: 0; color: inherit; cursor: pointer;
  padding: .5rem; min-width: 2.75rem; min-height: 2.75rem;
}
.lightbox :focus-visible { outline-color: var(--cal); }

.lightbox__figure {
  margin: 0; position: absolute; inset: 4.5rem var(--pad) 4.5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
}
.lightbox__media { display: flex; align-items: center; justify-content: center; min-height: 0; }
.lightbox__figure img {
  max-width: 100%; max-height: calc(100dvh - 12rem);
  width: auto; object-fit: contain; background: #171614;
}
.lightbox__caption { font-size: var(--fs-sm); color: #A8A49C; text-align: center; }

.lightbox__nav {
  position: absolute; bottom: 1rem; z-index: 2;
  font-size: 1.25rem; line-height: 1;
  background: none; border: 1px solid #3A3733; color: inherit; cursor: pointer;
  width: 3.25rem; height: 3.25rem;
  transition: background-color .2s var(--ease);
}
.lightbox__nav:hover { background: #1C1A18; }
.lightbox__nav--prev { left: var(--pad); }
.lightbox__nav--next { left: calc(var(--pad) + 4rem); }

/* ── WhatsApp flotante (solo móvil) ───────────────────────────────────────── */
.whatsapp-fab {
  position: fixed; right: var(--pad); bottom: var(--pad); z-index: 30;
  display: flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--tinta); color: var(--cal);
  box-shadow: var(--sombra-boton);
}

/* ── ≥ 800px ──────────────────────────────────────────────────────────────── */
@media (min-width: 800px) {
  /* Casi a pantalla completa, como pide el brief, sin tapar la foto con texto.
   * La columna de la foto termina en el borde derecho de la ventana; la de
   * texto arranca donde arrancaría el .wrap, así que la cabecera, el titular y
   * el resto de secciones siguen alineados en la misma vertical. */
  .hero__inner {
    grid-template-columns: 5fr 7fr;
    min-height: calc(100svh - 4.25rem - clamp(3.5rem, 9vw, 8rem));
    padding-left: max(var(--pad), calc((100% - var(--ancho)) / 2));
  }
  .hero__text { padding-inline: 0; }

  /* El titular deja de medirse contra la ventana y pasa a medirse contra su
   * columna. Con la pendiente de móvil, una palabra como PHOTOGRAPHY no cabía
   * en 5/12 del ancho, la columna de texto crecía por encima de su parte y la
   * foto se quedaba en una miniatura pegada al borde. */
  :root { --fs-h1: clamp(2.6rem, 5.2vw, 5.75rem); }

  /* La foto ocupa todo el alto del hero. Si además de salirse por la derecha
   * flotara con franjas de cal arriba y abajo, el sangrado parecería un
   * descuadre en vez de una decisión. */
  .hero__media { align-self: stretch; }
  .hero__media picture { display: block; height: 100%; }
  .hero__media img { height: 100%; aspect-ratio: auto; }

  .reasons { grid-template-columns: repeat(3, 1fr); }
  .ba { grid-template-columns: 4fr 7fr; }
  .services { grid-template-columns: 1fr 1fr; }
  .rates { grid-template-columns: 7fr 5fr; }
  .tiers { grid-template-columns: 1fr 1fr; }
  .contact { grid-template-columns: 7fr 5fr; }

  .lightbox__nav--prev { left: auto; right: calc(var(--pad) + 4rem); }
  .lightbox__nav--next { left: auto; right: var(--pad); }
}

/* ── ≥ 1040px ─────────────────────────────────────────────────────────────
 * La cabecera cambia más tarde que el resto del layout: el menú completo con
 * el botón necesita ~1020px —eran ~940 antes de añadir "Tarifas"— y por debajo
 * de eso el CTA y "Why it matters" se partían en dos líneas. Hasta que hay sitio de verdad, se queda la versión
 * corta con el botón flotante de WhatsApp.
 */
@media (min-width: 1040px) {
  .site-nav { display: flex; }
  .site-header__cta { display: inline-block; padding: .7rem 1.2rem; }
  .whatsapp-fab { display: none; }
}

@media (min-width: 1200px) {
  .hero { padding-top: clamp(3rem, 5vw, 6rem); }
  .hero__inner { gap: clamp(3rem, 5vw, 5rem); }
  .contact { gap: clamp(4rem, 7vw, 7rem); }
}

/* ── Movimiento reducido ──────────────────────────────────────────────────── */
/* Las sombras se quedan: son parte del lenguaje visual, no una animación.
 * Lo que desaparece son desplazamientos y transiciones. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card:hover .card__media,
  .card:focus-visible .card__media,
  .btn--ink:hover,
  .btn--ink:focus-visible { transform: none; }
}

/* ── Transparencia reducida ───────────────────────────────────────────────── */
/* Quien pide menos transparencia no pide "menos bonito": pide superficies
 * opacas donde el texto no compita con lo que pasa por debajo. */
@media (prefers-reduced-transparency: reduce) {
  .site-header, .site-header.is-scrolled {
    background: var(--cal);
    backdrop-filter: none;
  }
  .lightbox { background: #0B0A09; }
  .lightbox::backdrop { background: #0B0A09; }
}

/* ── Más contraste ────────────────────────────────────────────────────────── */
/* Los filetes de esta paleta son deliberadamente tenues (1.3:1). Cuando el
 * sistema pide contraste alto, dejan de ser un matiz y pasan a ser un borde. */
@media (prefers-contrast: more) {
  :root {
    --linea: #8A867E;
    --piedra: #46443F;
  }
  .site-header, .site-header.is-scrolled {
    background: var(--cal); backdrop-filter: none;
    border-bottom-color: var(--tinta);
  }
  .btn--plain { border-color: var(--tinta); padding-inline: 1rem; }
  .field input, .field textarea { border-bottom-width: 2px; }
  :focus-visible { outline-width: 3px; }
}

/* ── Impresión ────────────────────────────────────────────────────────────── */
@media print {
  .site-header, .whatsapp-fab, .lightbox, .form__actions { display: none; }
  body { background: #fff; }
  .shadowed { box-shadow: none; }
}