/* Mer Ovejero · estilo «Roca», lo común a las tres páginas.
   Oscuro y cálido, con su roca de fondo; la línea roja de sus vías; letras con carácter:
   Fraunces (títulos, con su lado suave y su cursiva), Hanken Grotesk (texto) y Caveat (anotaciones a mano,
   como en una guía de escalada). Botones rectos, nada de pastillas. Ninguna animación pasa de un segundo. */

:root {
  --noche: #140f0b;
  --noche-2: #1d1610;
  --noche-3: #2a2018;
  --arcilla: #7c3a22;
  --arcilla-2: #5e2a17;
  --ocre: #e0a468;
  --ocre-2: #c98a4e;
  --crema: #f1e6d4;
  --crema-2: #d9cab2;
  --crema-3: #a8957b;
  --rojo: #d24a32;
  --rojo-2: #b13a25;
  --linea: rgba(241, 230, 212, .14);

  --titulo: "Fraunces", Georgia, serif;
  --texto: "Hanken Grotesk", system-ui, sans-serif;
  --mano: "Caveat", "Segoe Print", cursive;

  --pad: clamp(16px, 4.2vw, 64px);
  --suave: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--noche); color: var(--crema); font-family: var(--texto); font-size: 17px; line-height: 1.55; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ocre); outline-offset: 4px; border-radius: 3px; }
::selection { background: var(--rojo); color: #fff; }

/* ---------- el fondo: su roca (una imagen ya armada, sin efectos en vivo) y curvas apenas ---------- */
.fondo { contain: strict; }
.fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.fondo span { position: absolute; inset: 0; }
.fondo__roca { background: linear-gradient(rgba(20, 15, 11, .42), rgba(20, 15, 11, .62)), url(../img/fondo-roca.webp) center / cover; }
.fondo__curvas { background: var(--ocre); opacity: .06; -webkit-mask: url(../img/curvas-2.svg) center / 140% auto; mask: url(../img/curvas-2.svg) center / 140% auto; }
.fondo__grano { display: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.capa { position: relative; z-index: 1; }

/* ---------- letras ---------- */
.mano { font-family: var(--mano); font-weight: 500; }
.antetitulo { margin: 0 0 6px; font-family: var(--mano); font-size: 28px; line-height: 1; color: var(--ocre); transform: rotate(-2deg); transform-origin: left; }
.t1 { margin: 0; font-family: var(--titulo); font-weight: 330; line-height: .88; letter-spacing: -.04em; font-variation-settings: "SOFT" 100, "opsz" 144; }
.t1 em, .t2 em { font-style: italic; font-weight: 280; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
.t2 { margin: 0; font-family: var(--titulo); font-weight: 340; font-size: clamp(44px, 6.4vw, 104px); line-height: .9; letter-spacing: -.03em; font-variation-settings: "SOFT" 100, "opsz" 144; }
.t2 em { color: var(--ocre); }
.t3 { margin: 0; font-family: var(--titulo); font-weight: 400; font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: -.02em; font-variation-settings: "SOFT" 100; }
.bajada { max-width: 44ch; margin: 18px 0 0; font-size: clamp(18px, 1.35vw, 21px); color: var(--crema-2); }
.dato { font-size: 14px; color: var(--crema-3); letter-spacing: .02em; }
.subraya { position: relative; white-space: nowrap; }
.subraya::after { content: ""; position: absolute; left: 0; right: 4%; bottom: -.08em; height: .18em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 14 C 40 4, 70 18, 110 9 S 170 6, 198 11' fill='none' stroke='%23d24a32' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* ---------- botones: rectos, con flecha ---------- */
.boton { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 52px; padding: 0 20px; border-radius: 4px; font-weight: 600; font-size: 16px; letter-spacing: .01em; transition: transform .25s var(--suave), background .25s, color .25s, box-shadow .25s; }
.boton::after { content: "→"; font-weight: 400; transition: transform .25s var(--suave); }
.boton:hover::after { transform: translateX(4px); }
.boton--rojo { background: #b33c27; color: #fff; }
.boton--rojo:hover { background: #962f1d; }
.boton--crema { background: var(--crema); color: var(--noche); }
.boton--crema:hover { background: #fff7ea; }
.boton--linea { box-shadow: inset 0 0 0 1.5px rgba(241, 230, 212, .35); }
.boton--linea:hover { box-shadow: inset 0 0 0 1.5px var(--crema); }
.boton--sin::after { content: none; }

/* ---------- arriba: su firma y el índice, como el de un libro ---------- */
.arriba { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 20px var(--pad); transition: background .3s, padding .3s; }
.arriba.solido { background: rgba(20, 15, 11, .95); padding-top: 12px; padding-bottom: 12px; box-shadow: 0 1px 0 var(--linea); }
.firma { display: flex; flex-direction: column; line-height: .95; font-family: var(--titulo); font-size: 24px; font-weight: 500; letter-spacing: -.02em; font-variation-settings: "SOFT" 100; }
.firma em { font-style: italic; font-weight: 300; color: var(--ocre); padding-left: .9em; }
.menu { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.menu a { position: relative; font-family: var(--titulo); font-size: 19px; font-weight: 400; font-variation-settings: "SOFT" 100; letter-spacing: -.01em; transition: color .2s; }
.menu a sup { margin-right: 4px; font-family: var(--mano); font-size: 17px; color: var(--ocre); vertical-align: .45em; }
.menu a:hover, .menu a.aca { color: var(--ocre); }
.menu a.aca::before { content: ""; position: absolute; left: 50%; bottom: -9px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--rojo); }
.menu__escribime { padding: 6px 4px; font-style: italic; color: var(--crema); }
.menu__escribime svg { position: absolute; inset: -10px -16px; width: calc(100% + 32px); height: calc(100% + 20px); overflow: visible; pointer-events: none; }
.menu__escribime path { fill: none; stroke: var(--rojo); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--suave); }
.menu__escribime:hover path { stroke-dashoffset: 260; }
.abrir-menu { display: none; margin-left: auto; align-items: center; gap: 10px; font-family: var(--mano); font-size: 26px; color: var(--crema); }
.abrir-menu i { position: relative; width: 26px; height: 2px; background: currentColor; }
.abrir-menu i::before { content: ""; position: absolute; left: 6px; right: 0; top: -7px; height: 2px; background: currentColor; }
.menu-celu { position: fixed; inset: 0; z-index: 45; padding: 120px var(--pad) 36px; display: flex; flex-direction: column; justify-content: space-between; background: var(--arcilla-2); }
.menu-celu::before { content: ""; position: absolute; inset: 0; background: var(--ocre); opacity: .1; -webkit-mask: url(../img/curvas.svg) center / cover; mask: url(../img/curvas.svg) center / cover; pointer-events: none; }
.menu-celu nav { position: relative; display: grid; }
.menu-celu a { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(241, 230, 212, .2); font-family: var(--titulo); font-size: 40px; line-height: 1.02; font-variation-settings: "SOFT" 100; }
.menu-celu a sup { font-family: var(--mano); font-size: 22px; color: var(--ocre); }
.menu-celu p { position: relative; margin: 0; font-family: var(--mano); font-size: 26px; color: var(--ocre); }
@media (max-width: 1020px) { .menu { display: none; } .abrir-menu { display: inline-flex; } }

/* ---------- la ficha de una obra (se abre desde donde la tocaste) ---------- */
.ficha { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; }
.ficha__velo { position: absolute; inset: 0; background: rgba(12, 9, 6, .88); opacity: 0; transition: opacity .35s; }
.ficha.abierta .ficha__velo { opacity: 1; }
.ficha__caja { position: relative; width: min(1080px, 100%); max-height: calc(100svh - 40px); overflow: auto; display: grid; grid-template-columns: 1.15fr 1fr; background: var(--noche-2); border-radius: 6px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px var(--linea); }
.ficha__foto { position: relative; display: grid; place-items: center; min-height: 420px; padding: 30px; background: radial-gradient(ellipse at 50% 60%, rgba(176, 74, 40, .35), transparent 70%), var(--noche-3); }
.ficha__foto img { max-height: 62svh; object-fit: contain; }
/* arriba deja lugar para la × de cerrar, que en compu cae sobre esta columna */
.ficha__texto { padding: 70px 40px 36px; display: flex; flex-direction: column; gap: 4px; }
.ficha__texto .t3 { font-size: clamp(38px, 3.6vw, 56px); }
.ficha__texto p { margin: 10px 0 0; color: var(--crema-2); }
.ficha__texto .mano { margin-top: 18px; font-size: 26px; line-height: 1.1; color: var(--ocre); }
.ficha__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 26px; }
.ficha__cerrar { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(20, 15, 11, .7); font-size: 22px; line-height: 1; }
.estado { align-self: flex-start; display: inline-block; margin-top: 12px; padding: 4px 10px; border-radius: 3px; font-size: 13px; font-weight: 600; background: rgba(224, 164, 104, .16); color: var(--ocre); }
.estado.proceso { background: rgba(210, 74, 50, .18); color: #f08d75; }
.estado.ver { background: transparent; box-shadow: inset 0 0 0 1px var(--linea); color: var(--crema-3); }
@media (max-width: 760px) {
  .ficha { padding: 0; align-items: end; }
  .ficha__caja { grid-template-columns: 1fr; max-height: 94svh; border-radius: 14px 14px 0 0; }
  .ficha__foto { min-height: 0; height: 42svh; padding: 18px; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
  /* la foto entra entera en su caja (una obra alta con marco se salía y tapaba el título) */
  .ficha__foto img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
  .ficha__texto { padding: 22px 20px 28px; }
}

/* ---------- notas para Mer: a mano, como un post-it ---------- */
.nota { display: none; position: relative; max-width: 40ch; margin: 16px 0 0; padding: 10px 14px 12px; border-radius: 3px; background: #f3e2b3; color: #3a2a17; font-family: var(--mano); font-size: 22px; line-height: 1.12; transform: rotate(-1deg); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6); }
.nota::before { content: "Para Mer: "; font-weight: 600; color: var(--rojo-2); }
body.con-notas .nota { display: block; }
.barra-mer { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; gap: 8px; align-items: stretch; }
.a-las-tres { display: flex; align-items: center; padding: 9px 14px; border-radius: 4px; background: var(--noche-2); color: var(--crema); font-weight: 600; font-size: 14px; box-shadow: inset 0 0 0 1px var(--linea), 0 10px 24px -8px rgba(0, 0, 0, .7); }
.a-las-tres:hover { color: var(--ocre); }
/* en el celu, la barra de Mer va como una tira fina arriba de todo: así no tapa ningún botón */
@media (max-width: 719px) {
  body.con-barra { padding-top: 38px; }
  .barra-mer { left: 0; right: 0; top: 0; bottom: auto; height: 38px; gap: 0; justify-content: space-between; align-items: center; padding: 0 8px 0 4px; background: #f3e2b3; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
  .barra-mer .a-las-tres { padding: 6px 8px; font-size: 13.5px; background: none; color: #3a2a17; box-shadow: none; }
  .barra-mer .interruptor-notas { padding: 4px 6px; font-size: 19px; box-shadow: none; background: none; }
  .con-barra .arriba { top: 38px; }
  .con-barra .menu-celu { top: 38px; }
  .con-barra .sala { top: 38px; }
}
.avisame { max-width: 620px; margin-top: 40px; }
.avisame label { display: block; margin-bottom: 12px; color: var(--crema-2); font-size: 18px; }
.avisame label b { color: var(--crema); font-weight: 600; }
.campo { display: flex; gap: 8px; }
.campo input { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border-radius: 4px; border: 1.5px solid rgba(241, 230, 212, .35); background: rgba(20, 15, 11, .4); color: var(--crema); font: inherit; font-size: 17px; }
.campo input:focus { outline: none; border-color: var(--ocre); }
.gracias { min-height: 1.2em; margin: 8px 0 0; font-size: 24px; color: var(--ocre); }
.ficha__foto.entera img { width: auto; height: auto; max-width: 90%; padding: 10px; border-radius: 3px; background: #efe6d6; }
.interruptor-notas { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 4px; background: #f3e2b3; color: #3a2a17; font-family: var(--mano); font-size: 21px; line-height: 1; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .7); }
.interruptor-notas i { width: 28px; height: 16px; border-radius: 99px; background: #b7a27a; position: relative; transition: background .3s; }
.interruptor-notas i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .3s var(--suave); }
body.con-notas .interruptor-notas i { background: var(--rojo); }
body.con-notas .interruptor-notas i::after { transform: translateX(12px); }

/* ---------- aviso de lo que falta ---------- */
.aviso { position: fixed; left: 50%; bottom: 76px; z-index: 95; width: min(440px, calc(100% - 32px)); transform: translate(-50%, 10px); padding: 12px 16px; border-radius: 4px; background: var(--crema); color: var(--noche); font-size: 15px; font-weight: 500; text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--suave); }
.aviso.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- aparecer al llegar (si no hay JS, todo se ve) ---------- */
.js .aparece { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--suave), transform .6s var(--suave); }
.js .aparece.visto { opacity: 1; transform: none; }

@keyframes subir { to { transform: none; } }
@keyframes aparecer { to { opacity: 1; } }
@keyframes llegar { to { opacity: 1; transform: none; } }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
@keyframes girar { to { transform: rotate(360deg); } }
/* la ficha: el botón va pegado a los datos (sin un hueco grande cuando la obra no tiene texto) */
.ficha__acciones { margin-top: 0; padding-top: 24px; }