/* ═══════════════════════════════════════════════════════════════════════
   DOSTRESCINCO · capa propia del sitio del estudio
   ───────────────────────────────────────────────────────────────────────
   Se carga DESPUÉS de atmosfera.css y solo agrega lo que la landing de
   Atmosfera no necesitaba: hero con fotografía, tarjetas de proyecto,
   galerías y el filtro por disciplina. Usa los mismos tokens: nada de
   colores, radios ni sombras nuevos.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Selección de texto ───────────────────────────────────────────────
   El azul del navegador es lo único que aparece en pantalla sin haberlo
   elegido nosotros. Lima con texto negro, que funciona igual sobre fondo
   claro y sobre las tarjetas oscuras. */

::selection { background: var(--acento); color: var(--negro); text-shadow: none; }
::-moz-selection { background: var(--acento); color: var(--negro); text-shadow: none; }

/* ── Corrección heredada ──────────────────────────────────────────────
   En atmosfera.css, `.seccion` es dos cosas a la vez: el padding de una
   sección (84px) y la tipografía de un titular (`h2.seccion`). Un titular
   se lleva las dos reglas, así que cada h2 arrastra 84px arriba y abajo.
   Se anula acá y no allá, para que la copia siga siendo copia. */

h1.seccion, h2.seccion, h3.seccion { padding: 0; }

/* ── Hero con fotografía ──────────────────────────────────────────────
   La foto va dentro de una tarjeta, no a sangre: en este sistema todo es
   tarjeta sobre el gris de fondo, y un bloque a sangre rompe la regla. */

.hero-estudio { padding: 56px 0 24px; }

/* ── Portada a pantalla completa ──────────────────────────────────────
   Imagen o video ocupando todo, el texto encima sobre vidrio. La capa
   de fondo NO es una tarjeta: es la única excepción a la regla de que
   todo va en tarjeta, y es lo que le da el golpe de entrada. */

.portada {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #0a0a0a;
  /* Se sale del ancho del envoltorio: va de borde a borde. */
  margin-bottom: 8px;
  /* La barra es fija y se monta encima, así que el contenido necesita ese
     aire arriba: sin esto, en pantallas bajas el chip se mete debajo del
     logo en vez de empujar hacia abajo. */
  padding-top: 96px;
}

.portada__fondo,
.portada__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.portada__video { opacity: 0; transition: opacity 1.2s ease; }
.portada__video.lista { opacity: 1; }

/* Velo: sin esto el titular pelea contra cualquier fotograma claro. */
.portada::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.55) 32%, rgba(10,10,10,0.18) 62%, rgba(10,10,10,0.42) 100%),
    radial-gradient(70% 60% at 18% 70%, rgba(10,10,10,0.5), transparent 70%);
}

.portada__contenido {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--ancho);
  margin: 0 auto; padding: 0 32px 34px;
}

.portada .titular { color: #fff; }
.portada .titular strong { color: #fff; }
.portada .bajada { color: rgba(255,255,255,0.78); }
.portada .pie { color: rgba(255,255,255,0.5); }

/* Tira de datos sobre vidrio, apoyada en el borde inferior. */
.portada__datos {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--ancho);
  margin: 0 auto 26px; padding: 0 32px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.dato-vidrio {
  border-radius: var(--radio);
  padding: 16px 18px;
  background: rgba(255,255,255,0.09);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
  color: #fff;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(.2,.7,.3,1);
}
a.dato-vidrio:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); }
.dato-vidrio .etiqueta { color: rgba(255,255,255,0.6); }
.dato-vidrio__n { font-size: 27px; font-weight: 300; letter-spacing: -1.2px; line-height: 1.05; margin-top: 5px; }
.dato-vidrio__n em { font-style: normal; color: var(--acento); }
.dato-vidrio .referencia { color: rgba(255,255,255,0.55); }

@media (max-width: 760px) {
  .portada__datos { grid-template-columns: 1fr; gap: 8px; }
  .portada__datos .oculta-chico { display: none; }
  .portada { min-height: 92svh; }
}

/* La barra se monta SOBRE la portada: en esas páginas pasa a fija, así el
   video corre por detrás en lugar de empezar debajo. Arranca transparente
   con el texto claro y recupera el vidrio apenas el scroll la despega. */
.barra.sobre-portada {
  position: fixed;
  left: 0; right: 0; top: 0;
}
.barra.sobre-portada:not(.pegada) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.barra.sobre-portada:not(.pegada) .marca-nombre { color: #fff; }
.barra.sobre-portada:not(.pegada) .marca-by { color: rgba(255,255,255,0.55); }
.barra.sobre-portada:not(.pegada) .nav a:not(.btn) { color: rgba(255,255,255,0.82); }
.barra.sobre-portada:not(.pegada) .nav a:not(.btn):hover { color: #fff; }
.barra.sobre-portada:not(.pegada) .menu-btn span { background: #fff; }
/* El CTA es un pill negro con texto lima. Sobre una portada oscura el
   pill desaparece y queda el texto flotando: mientras la barra está
   transparente se invierte a lima sólido, que se ve sobre cualquier
   fotograma. Al pegarse vuelve al negro de siempre. */
.barra.sobre-portada:not(.pegada) .btn-negro { background: var(--acento); color: var(--negro); }
.barra.sobre-portada:not(.pegada) .btn-negro:hover { box-shadow: 0 6px 20px rgba(222,255,34,0.45); }

.hero-partido {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 960px) { .hero-partido { grid-template-columns: 1fr; gap: 28px; } }

.foto-marco {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  background: #e6e6e6;
  box-shadow: var(--sombra-alta);
}
.foto-marco img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-marco--alta { aspect-ratio: 4 / 3; }
.foto-marco--ancha { aspect-ratio: 16 / 9; }
/* La banda de cierre de las fases: 1920×400, una tajada finita. No es una
   foto que se mire, es un respiro antes del paso siguiente, así que la
   proporción manda y la imagen se recorta sola con object-fit: cover.
   En el celular se afloja a 3:1, porque a 4.8:1 sobre 360 px quedan
   setenta y cinco píxeles de alto y no se ve nada. */
.foto-marco--tajada { aspect-ratio: 1920 / 400; }
@media (max-width: 760px) { .foto-marco--tajada { aspect-ratio: 3 / 1; } }
/* La banda y la franja del paso siguiente son el mismo gesto: una remata
   la fase y la otra te lleva a la que sigue. Con los 84 px de abajo de una
   sección más los 84 de arriba de la otra quedaban 168 px de aire en el
   medio y se leían como dos cosas sueltas. */
.seccion--cierre { padding-bottom: 0; }
.seccion--cierre + .seccion { padding-top: 28px; }

/* Etiqueta flotando sobre la foto, como los rótulos del panel */
.foto-rotulo {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: #fff; border-radius: 30px;
  padding: 7px 14px; font-size: 11px; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase;
}

/* ── Racimo de tarjetas del hero ──────────────────────────────────────
   El equivalente del panel de ejemplo de Atmosfera: en vez de inventar
   una captura, muestra los números reales del estudio. */

.racimo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.racimo .ancha { grid-column: 1 / -1; }
.racimo .tarjeta { padding: 20px 20px; }
@media (max-width: 420px) { .racimo { grid-template-columns: 1fr; } }

.mini-dato { font-size: 27px; font-weight: 300; letter-spacing: -1.2px; line-height: 1.05; color: var(--negro); }
.tarjeta-negra .mini-dato { color: #fff; }
.tarjeta-lima .mini-dato { color: var(--negro); }

/* ── Muro de proyectos ────────────────────────────────────────────────
   El trabajo va de borde a borde y con piezas de distinto tamaño. Ocho
   columnas, porque 5 + 3 = 8: el mismo reparto áureo de las fichas, a
   escala de página (la regla 2·3·5).

   El alto de cada pieza NO se fija acá: sale de `aspect-ratio` con las
   dos variables que pone el generador. Como las columnas de una banda
   suman ocho, las piezas caen solas en la misma fila; y como la fila
   toma la altura de la más alta y el resto se estira, ninguna queda con
   un hueco debajo. Por eso no hace falta ni alto fijo ni cuentas con
   `100vw`, que es donde se cuela la barra de scroll. */

.muro-marco { padding: 0 var(--f21, 21px); }

.muro {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--f13, 13px);
}

.muro__ficha {
  position: relative;
  grid-column: span var(--cols, 4);
  aspect-ratio: var(--cols, 4) / var(--alto, 4);
  /* El `aspect-ratio` solo propone la altura de la fila; el `height`
     hace que todas las piezas de la banda la tomen. Sin esto, la pieza
     de 3 columnas queda nueve píxeles más baja que la de 5 —la
     proporción no sabe de los huecos entre columnas— y los pies de una
     misma fila no cierran. */
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: #1a1a1a;
  text-decoration: none;
  color: #fff;
}

.muro__ficha img,
.muro__ficha video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.muro__ficha:hover img,
.muro__ficha:hover video { transform: scale(1.05); }

/* El velo va entre la foto y el texto: sin él, el título desaparece
   sobre cualquier foto clara. */
.muro__ficha::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(8,8,8,0.84) 0%, rgba(8,8,8,0.36) 30%, rgba(8,8,8,0.04) 62%, transparent 100%);
  transition: opacity 0.45s ease;
}
.muro__ficha:hover::after { opacity: 0.88; }

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

/* El proyecto sin fotografía: el dato ocupa la pieza entera. */
.muro__dato {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--negro); padding: var(--f34, 34px);
}
.muro__dato p {
  margin: 0; text-align: center;
  font-size: clamp(34px, 4.4vw, 62px); font-weight: 200;
  letter-spacing: -2.5px; line-height: 1; color: #fff;
}
.muro__dato em { font-style: normal; color: var(--acento); }

/* El texto se apoya directo sobre la foto, sin panel: es lo que hace que
   la imagen mande y no la ficha. */
.muro__texto {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--f21, 21px) var(--f21, 21px) calc(var(--f21, 21px) - 3px);
}
.muro__cliente {
  font-size: 10px; font-weight: 600; letter-spacing: 2.2px;
  text-transform: uppercase; color: rgba(255,255,255,0.68);
}
.muro__titulo {
  margin-top: 7px;
  font-size: clamp(17px, 1.3vw, 23px); font-weight: 700;
  letter-spacing: -0.4px; line-height: 1.22; color: #fff;
  text-shadow: 0 1px 18px rgba(0,0,0,0.45);
  max-width: 18ch;
}

/* Con un filtro puesto la composición no se puede sostener: faltan
   piezas y las bandas dejan de sumar ocho. Se pasa a un ritmo parejo,
   que es lo honesto — filtrado es un listado, no una composición. */
.muro--parejo { grid-template-columns: repeat(3, 1fr); }
.muro--parejo .muro__ficha {
  grid-column: auto;
  aspect-ratio: 1 / 1;
}

/* De tablet para abajo la banda de tres no entra: la pieza de dos
   columnas quedaría de doscientos píxeles y el título no se puede leer.
   Se pasa a dos parejas. */
@media (max-width: 1099px) {
  .muro__ficha,
  .muro--parejo .muro__ficha { grid-column: span 4; aspect-ratio: 1 / 1; }
  .muro--parejo { grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 760px) {
  .muro-marco { padding: 0 var(--f13, 13px); }
  .muro { gap: var(--f8, 8px); }
  .muro__ficha,
  .muro--parejo .muro__ficha { grid-column: span 8; aspect-ratio: 4 / 5; }
  .muro__titulo { max-width: none; }
}

/* ── Etiquetas de disciplina ──────────────────────────────────────────
   Mismo lenguaje que las fichas de integración de la landing. */

.discs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.disc {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
  padding: 5px 11px; border-radius: 30px;
  background: #f2f2f2; color: #5a5a5a; text-decoration: none;
  transition: background 0.18s, color 0.18s;
}
a.disc:hover { background: var(--negro); color: var(--acento); }
.disc--on { background: var(--acento); color: var(--negro); }
.tarjeta-negra .disc { background: rgba(255,255,255,0.13); color: #c4c4c4; }
/* `.tarjeta-negra .disc` le gana por especificidad a `.disc--on`, y sin
   esta línea las catorce disciplinas de Fisterra se ven apagadas — justo
   lo contrario de lo que esa página tiene que decir. */
.tarjeta-negra .disc--on { background: var(--acento); color: var(--negro); }
.tarjeta-negra a.disc:hover { background: var(--acento); color: var(--negro); }

/* ── Filtro del índice de trabajo ───────────────────────────────────
   EN PAUSA: ninguna página dibuja ya los botones. Igual que .muro--parejo
   acá arriba, queda por si el filtro vuelve.                        */

.filtros { display: flex; flex-wrap: wrap; gap: 7px; }
.filtro {
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 8px 15px; border-radius: 30px;
  border: none; cursor: pointer;
  background: var(--card); color: #5a5a5a;
  box-shadow: var(--sombra);
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.filtro:hover { box-shadow: var(--sombra-alta); color: var(--negro); }
.filtro[aria-pressed='true'] { background: var(--negro); color: var(--acento); }

/* ── Galería ──────────────────────────────────────────────────────── */

.galeria { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.galeria figure { margin: 0; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); background: #e6e6e6; }
.galeria img { width: 100%; display: block; }
.galeria .ancha { grid-column: 1 / -1; }

/* ── Bloques de texto largo ───────────────────────────────────────── */

.prosa { max-width: 62ch; font-size: 15.5px; color: #4f4f4f; line-height: 1.75; }
.prosa p + p { margin-top: 14px; }
.prosa strong { color: var(--negro); font-weight: 700; }
.tarjeta-negra .prosa { color: #a8a8a8; }
.tarjeta-negra .prosa strong { color: #fff; }

/* Par de columnas: rótulo a la izquierda, contenido a la derecha */
.par { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .par { grid-template-columns: minmax(10rem, 1fr) 2.6fr; gap: 48px; } }

/* ── Fase y disciplina en la página de servicios ──────────────────── */

/* ── Las cuatro fases del home ────────────────────────────────────────
   Eran una rejilla de 2×2: cuatro tarjetas de texto compitiendo entre
   sí, sin una sola imagen. Ahora van una debajo de la otra, cada una
   con su foto, y la foto alterna de lado para que la tira no se lea
   como una lista.

   La foto va DENTRO de la tarjeta: la fila no es un contenedor con una
   foto suelta al lado, es la tarjeta partida en dos. Por eso `.fase-fila`
   se pone sobre el mismo div que lleva `.tarjeta`.

   El reparto es 5:3 a favor de la foto. Al revés —como el hero de las
   páginas de fase— el texto se queda con 800px para tres renglones
   cortos y la mitad de la tarjeta queda vacía. */
.fases-apiladas { display: grid; gap: var(--f34, 34px); }

.fase-fila { display: grid; gap: var(--f21, 21px); align-items: center; }

/* Adentro de la tarjeta la foto ya no necesita su propia sombra: serían
   dos sombras encimadas y la foto parecería pegada arriba. */
.fase-fila .foto-marco { box-shadow: none; }

@media (min-width: 900px) {
  /* La foto va a sangre: ocupa su mitad de la tarjeta de borde a borde y
     la tarjeta le recorta las esquinas con su propio radio. Por eso la
     tarjeta pierde el padding acá y lo recupera el lado del texto.

     El alto lo manda el texto, no la foto: sin `aspect-ratio` la foto
     se estira a lo que mida la fila y recorta con object-fit. Así las
     cuatro tarjetas tienen la foto llena, aunque las originales vengan
     una vertical, una panorámica y dos 16:9. */
  .fase-fila {
    grid-template-columns: var(--parte-mayor) var(--parte-menor);
    gap: 0;
    padding: 0;
    overflow: hidden;
    align-items: stretch;
  }

  /* El espejo invierte el reparto y manda la foto a la segunda columna.
     Lo mueve `order`, no el orden del HTML: así en el celular, donde
     todo es una sola columna, la foto sigue yendo arriba en las cuatro
     filas y no una vez sí y otra no. */
  .fase-fila--espejo { grid-template-columns: var(--parte-menor) var(--parte-mayor); }
  .fase-fila--espejo .fase-fila__foto { order: 2; }

  /* La foto se saca del flujo para que NO opine sobre el alto de la
     fila. Si queda en flujo, una original vertical —la de la fase 03 es
     1080x1920— se dibuja a su proporción sobre 800px de ancho y estira
     la tarjeta a 1500px de alto. Posicionada, el alto lo fija el texto
     y la foto lo rellena recortando. */
  .fase-fila__foto { position: relative; min-height: 220px; }
  .fase-fila .foto-marco { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
  .fase-fila__texto { padding: var(--f34); align-self: center; }
}

.fase-num { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--acento); }
.tarjeta .fase-num { color: #c9d900; }
.fase-nombre { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; color: var(--negro); margin-top: 6px; }
.tarjeta-negra .fase-nombre { color: #fff; }

/* ── Los pasos de una fase ────────────────────────────────────────────
   Eran tres tarjetas en fila. Tres columnas iguales se leen como un menú
   —elegí una—, y acá el orden es el contenido: el 02 pasa después del 01.
   Puestos en vertical y colgados de una sola línea, el orden se ve sin
   tener que explicarlo.

   La línea la dibuja cada paso, no la lista: del borde de su número al
   número siguiente, y el último no dibuja nada. Una sola línea de punta
   a punta es más corta de escribir, pero queda colgando por debajo del
   último número como un cable suelto.

   El color no es `--linea`: ese gris está hecho para bordes DENTRO de
   una tarjeta blanca y sobre el fondo de la página no se ve. Un negro
   con alfa se adapta a lo que tenga debajo. */

.pasos {
  --paso-nodo: 46px;
  --paso-aire: var(--f55, 55px);
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--paso-aire);
}

.paso {
  position: relative;
  display: grid; align-items: start;
  grid-template-columns: var(--paso-nodo) minmax(0, 1fr);
  gap: var(--f21, 21px);
}

/* Arranca donde termina el número y baja hasta el siguiente: el negativo
   es exactamente el aire entre pasos, así que llega justo al borde del
   número de abajo y no lo pisa. */
.paso::before {
  content: ''; position: absolute;
  top: var(--paso-nodo); bottom: calc(var(--paso-aire) * -1);
  left: calc(var(--paso-nodo) / 2); width: 2px; transform: translateX(-1px);
  background: rgba(10, 10, 10, 0.11);
}
.paso:last-child::before { content: none; }

.paso__nodo {
  width: var(--paso-nodo); height: var(--paso-nodo);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--negro); color: var(--acento);
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
}

/* Dentro del hero los pasos son lo segundo que se lee, no lo primero:
   el número se achica, el aire se acorta y el título baja a 19px para
   que no compita con el titular de la página, que está justo arriba. */
.pasos--compacta { --paso-nodo: 42px; --paso-aire: var(--f55, 55px); }
.pasos--compacta .paso { gap: var(--f13, 13px); }
.pasos--compacta .paso__nodo { font-size: 11px; }
.pasos--compacta .paso__titulo { font-size: 21px; letter-spacing: -0.4px; }

/* El hito lleva enlace, pero no se pinta como enlace: si los tres títulos
   salen subrayados la escalera se lee como un menú de links y no como el
   recorrido de la fase. El subrayado lima aparece al pasar por encima. */
.paso__titulo a {
  color: inherit; text-decoration: none;
  box-shadow: inset 0 -2px 0 transparent;
  transition: box-shadow 0.18s;
}
.paso__titulo a:hover { box-shadow: inset 0 -2px 0 var(--acento); }
.pasos--compacta .prosa { font-size: 14.5px; line-height: 1.65; }

/* El texto no se estira a los 1400px del envoltorio: a esa medida el
   renglón pasa de 100 caracteres y el ojo pierde el salto de línea. */
.paso__texto { max-width: 62ch; padding-bottom: var(--f8, 8px); }
.paso__titulo { font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -0.6px; color: var(--negro); line-height: 1.15; }

/* En el celular la línea se corre a la izquierda y el nodo se achica:
   46px de columna más 21 de aire eran un tercio del ancho útil. */
@media (max-width: 700px) {
  .pasos { --paso-nodo: 34px; --paso-aire: var(--f34, 34px); }
  .paso { gap: var(--f13, 13px); }
  .paso__nodo { font-size: 10.5px; }
}

.item-disc { padding: 15px 0; border-top: 1px solid var(--linea); }
.item-disc:first-child { border-top: none; padding-top: 0; }
.item-disc__n { font-size: 15.5px; font-weight: 700; color: var(--negro); letter-spacing: -0.2px; }
.item-disc__q { margin-top: 3px; font-size: 13.5px; color: #7a7a7a; }
.tarjeta-negra .item-disc { border-top-color: #232323; }
.tarjeta-negra .item-disc__n { color: #fff; }
.tarjeta-negra .item-disc__q { color: #9a9a9a; }

/* ── Formulario ───────────────────────────────────────────────────── */

.campo { display: block; margin-bottom: 18px; }
.campo__et { display: block; font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gris-claro); margin-bottom: 7px; }
.campo input, .campo select, .campo textarea {
  width: 100%; font-family: inherit; font-size: 14.5px; color: var(--texto);
  background: #fafafa; border: 1.5px solid #e8e8e8; border-radius: 8px;
  padding: 11px 13px; transition: border-color 0.18s, background 0.18s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--negro); background: #fff;
}
.campo textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.trampa { position: absolute; left: -9999px; }

/* ── Más color detrás del vidrio ──────────────────────────────────────
   El vidrio solo se nota si hay algo que mirar por detrás. En la landing
   de Atmosfera las manchas son muy tenues porque el fondo se ve casi
   siempre desnudo; acá queda tapado por tarjetas traslúcidas, así que se
   suben bastante y se agrega una cuarta. Sigue siendo gradiente sobre
   #f0f0f0 y sigue derivando con la misma animación. */

body::before {
  background:
    radial-gradient(42% 46% at 18% 14%, rgba(222,255,34,0.34), transparent 64%),
    radial-gradient(38% 42% at 86% 26%, rgba(60,145,230,0.26), transparent 66%),
    radial-gradient(36% 38% at 58% 88%, rgba(250,131,52,0.22), transparent 64%),
    radial-gradient(30% 34% at 8% 72%, rgba(60,145,230,0.16), transparent 62%);
}

/* ── Las tarjetas son vidrio ──────────────────────────────────────────
   Material translúcido al estilo de macOS: el fondo que deriva se ve
   pasar por detrás, el blur alto lo vuelve una mancha de color en lugar
   de una imagen reconocible, y la saturación levantada evita el gris
   lavado que deja el blur solo.

   Las tres piezas que hacen que se lea como vidrio y no como "blanco
   transparente":
   · borde claro de 1px  → el canto del panel
   · inset 0 1px 0 arriba → el brillo especular del borde superior
   · sombra ancha y suave → el panel flota, no está pegado al fondo

   El brillo va como `inset` y no como pseudo-elemento a propósito:
   .destello ya usa ::before y ::after, y .barrido usa ::after. Un
   ::before global acá le pisaría la capa a los dos.                   */

.tarjeta {
  background: rgba(255,255,255,0.52);
  backdrop-filter: blur(30px) saturate(185%);
  -webkit-backdrop-filter: blur(30px) saturate(185%);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow:
    0 10px 34px rgba(0,0,0,0.07),
    0 2px 8px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.92);
}
.tarjeta:hover {
  background: rgba(255,255,255,0.62);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.11),
    0 3px 12px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

/* Vidrio oscuro. No baja de 0.80: por debajo el texto gris de .prosa
   empieza a perder contraste contra el fondo claro que se filtra. */
.tarjeta-negra {
  background: rgba(10,10,10,0.80);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 14px 44px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.tarjeta-negra:hover { background: rgba(10,10,10,0.86); }

/* La lima casi no se traslucida: es el color de "plata lograda" y si se
   lava deja de leerse como acento. Solo lo justo para que acompañe. */
.tarjeta-lima {
  background: rgba(222,255,34,0.86);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow:
    0 12px 38px rgba(150,180,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
.tarjeta-lima:hover { background: rgba(222,255,34,0.93); }

/* La franja de cierre y las fichas chicas, del mismo material. */
.franja-cta {
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 54px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.14);
}

.ficha-integra, .filtro, .acordeon {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 4px 16px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9);
}
.filtro[aria-pressed='true'] {
  background: rgba(10,10,10,0.88);
  border-color: rgba(255,255,255,0.12);
  color: var(--acento);
}

/* El borde destellante, ahora compatible con el vidrio.

   En atmosfera.css el cono giratorio se tapa con un ::after sólido del
   color de la tarjeta, y solo asoma el milímetro y medio que sobresale.
   Eso obliga a que la tarjeta sea opaca: con vidrio, el ::after sólido
   mata la transparencia y queda una tarjeta negra entre dos traslúcidas.

   Acá el cono se recorta con una máscara en xor: se pinta el borde de
   1,5px y el centro queda literalmente vacío, así que el backdrop-filter
   de la tarjeta sigue viendo el fondo. Ya no hace falta tapar nada. */

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .destello::before {
    padding: 1.5px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
  .destello::after { display: none; }
}

/* Sin soporte de máscara se vuelve al método original: capa sólida. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .destello::after { background: rgba(255,255,255,0.96); }
  .destello.en-negro-pleno::after { background: #0d0d0d; }
  .destello.en-negro::after { background: #141414; }
}

/* Donde no hay backdrop-filter, todo vuelve a sólido: sin el blur, la
   transparencia sola deja el texto flotando sobre el fondo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tarjeta { background: #fff; }
  .tarjeta:hover { background: #fff; }
  .tarjeta-negra, .tarjeta-negra:hover { background: var(--negro); }
  .tarjeta-lima, .tarjeta-lima:hover { background: var(--acento); }
  .franja-cta { background: var(--negro); }
  .ficha-integra, .filtro, .acordeon { background: #fff; }
  .filtro[aria-pressed='true'] { background: var(--negro); }
}

/* ── Vidrio, un poco más marcado ──────────────────────────────────────
   atmosfera.css deja `.esmerilado` en 0.86 de opacidad, que es el mínimo
   seguro cuando abajo hay texto largo. Acá el panel del hero contiene
   tarjetas opacas, así que se puede bajar bastante más y se nota de
   verdad el fondo que deriva por atrás. Se le suma un borde claro y una
   luz interior arriba, que es lo que termina de leerse como vidrio. */

.esmerilado {
  background: rgba(255,255,255,0.58) !important;
  backdrop-filter: blur(34px) saturate(190%);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.10),
    0 2px 10px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.85);
}

.esmerilado-oscuro {
  background: rgba(14,14,14,0.62) !important;
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.10);
}

/* Donde el navegador no soporta backdrop-filter, la transparencia sola
   dejaría el texto flotando sobre el fondo: se vuelve a un sólido. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .esmerilado { background: rgba(255,255,255,0.94) !important; }
  .esmerilado-oscuro { background: rgba(14,14,14,0.94) !important; }
}

/* ── Utilidades ───────────────────────────────────────────────────── */

.saltar {
  position: absolute; top: -3rem; left: 24px; z-index: 200;
  background: var(--acento); color: var(--negro);
  padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  text-decoration: none; transition: top 0.2s;
}
.saltar:focus { top: 10px; }

.pila > * + * { margin-top: var(--pila, 14px); }
.pila-lg { --pila: 22px; }
.oculto { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   LA REGLA DE GRILLA 2·3·5
   ───────────────────────────────────────────────────────────────────────
   235 son los tres primeros números de Fibonacci, y son el nombre del
   estudio. Acá dejan de ser un relato de marca y pasan a ser la regla
   que decide cómo se parte el espacio y cuánto respira cada cosa.

   Dos aplicaciones:

   · REPARTO — toda división asimétrica usa 5:3, 3:5 o 2:1. Nunca un
     número elegido a ojo como "1.02fr" o "2.6fr".
   · RITMO — los espacios salen de la secuencia en píxeles: 8, 13, 21,
     34, 55, 89. Cada uno es la suma de los dos anteriores, así que las
     distancias crecen como crece la serie y no como decida el humor.

   Lo que NO se fuerza: una grilla de tres iguales es de tres iguales.
   La regla ordena lo asimétrico, no convierte todo en asimétrico.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Ritmo: la secuencia, en píxeles */
  --f8:  8px;
  --f13: 13px;
  --f21: 21px;
  --f34: 34px;
  --f55: 55px;
  --f89: 89px;

  /* Reparto: las tres divisiones */
  --parte-mayor: 5fr;
  --parte-menor: 3fr;
}

/* ── Reparto ──────────────────────────────────────────────────────────
   Las divisiones de dos columnas del sitio pasan a 5:3 o 3:5. Antes
   eran 1.02fr/1fr y 2.6fr, que no querían decir nada. */

@media (min-width: 900px) {
  /* Hero del home: el texto manda, la imagen acompaña */
  .hero-partido { grid-template-columns: var(--parte-mayor) var(--parte-menor); }

  /* Rótulo a la izquierda, contenido a la derecha: acá el menor manda */
  .par { grid-template-columns: var(--parte-menor) calc(var(--parte-mayor) + 2fr); gap: var(--f55); }
}

@media (min-width: 1000px) {
  /* Ficha de caso: índice y contenido, 2:1 invertido a favor del texto */
  .caso-cuerpo { grid-template-columns: minmax(260px, 2fr) 5fr; gap: var(--f55); }
}

/* El ritmo de los componentes vive en caso.css, que se carga último.
   Tenerlo acá creaba tres reglas compitiendo para lo mismo y ganaba
   siempre la de caso.css, así que los cambios no se veían. */