@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..600&family=Newsreader:ital,opsz,wght@0,6..72,300..500;1,6..72,300..500&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============================================================
   Hub Remodelación Costal — sistema de diseño v2 «manuscrito quirúrgico»
   Editorial de lujo, tema OSCURO: navy tinta · hueso · oro metálico.
   Unificado con las páginas de marca de ribxcar.org.
   Fraunces (display) + Newsreader (lectura) + IBM Plex Mono (datos/DOI).
   ============================================================ */
:root {
  --ink:     #0A1526;   /* fondo, navy tinta */
  --navy:    #0E1B33;
  --panel:   #122744;   /* paneles / cards */
  --bone:    #F4EFE4;   /* texto principal */
  --bone-dim:#c9c2b2;
  --bone-soft:#9aa2b0;
  --gold:    #C9A15E;   /* acento (autoría) */
  --gold-lite:#E7CE97;
  --gold-deep:#8A6B34;
  --line:    rgba(201,161,94,.16);
  --line-soft:rgba(244,239,228,.08);
  --muted:   #8a93a3;
  --measure: 66ch;
  --gold-grad: linear-gradient(135deg,#E7CE97 0%,#C9A15E 45%,#8A6B34 100%);

  --display: "Fraunces", Georgia, serif;
  --body:    "Newsreader", Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.72;
  font-weight: 350;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}
::selection { background: var(--gold); color: var(--ink); }

/* atmósfera + grano de papel, fijos */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% 6%, rgba(201,161,94,.10), transparent 55%),
    radial-gradient(90% 60% at 8% 100%, rgba(18,39,68,.6), transparent 60%),
    radial-gradient(140% 120% at 50% -10%, transparent 60%, rgba(6,12,22,.7));
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 26px; }

/* ---------- tipografía ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--bone); letter-spacing: -0.01em; }
p { margin: 0 0 1.15rem; max-width: var(--measure); color: var(--bone-dim); }
a { color: var(--gold); }
em { font-style: italic; }

/* ---------- header ---------- */
header.site {
  border-bottom: 1px solid var(--line);
  background: rgba(10,21,38,.72);
  backdrop-filter: saturate(1.1) blur(12px);
  position: sticky; top: 0; z-index: 10;
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 26px; max-width: 1080px; }
.brand {
  font-family: var(--display); font-weight: 400; font-size: 1.42rem; color: var(--bone);
  text-decoration: none; letter-spacing: 0.03em; white-space: nowrap;
}
.brand b { color: var(--gold); font-weight: 500; font-style: italic; }
.brand:hover { color: var(--gold-lite); }
nav.site { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: flex-end; }
nav.site a {
  font-family: var(--body); font-size: 0.85rem; text-transform: none; letter-spacing: 0.03em;
  color: var(--bone-dim); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
nav.site a:hover { color: var(--bone); border-color: var(--gold); }
.lang { font-family: var(--mono); font-size: 0.72rem; color: var(--gold); letter-spacing:.04em; }
.lang a { color: var(--gold); border: none; }
/* puertas (Pacientes / Para cirujanos) — como en la home */
.doors { display: flex; gap: 12px; align-items: center; }
.door { font-size: 0.7rem; letter-spacing: .1em; text-transform: uppercase; padding: 9px 16px; border-radius: 2px; text-decoration: none; transition: .3s; white-space: nowrap; }
.door.pac { color: var(--bone-dim); border: 1px solid var(--line); }
.door.pac:hover { border-color: var(--gold); color: var(--bone); }
.door.cir { background: var(--gold-grad); color: var(--ink); font-weight: 600; }
.door.cir:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (max-width: 860px) { .doors, nav.site .lang { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--navy), var(--ink)); }
.hero .wrap { padding: 84px 26px 52px; position: relative; z-index: 1; max-width: 900px; }
.hero::after {           /* motivo de arcos costales, oro tenue */
  content: ""; position: absolute; right: -50px; top: -30px; width: 500px; height: 500px; z-index: 0;
  opacity: .16; pointer-events: none;
  background: no-repeat right top / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23C9A15E' stroke-width='2'%3E%3Cpath d='M30 390 Q30 120 330 70'/%3E%3Cpath d='M30 360 Q40 150 300 100'/%3E%3Cpath d='M30 330 Q50 180 270 130'/%3E%3Cpath d='M30 300 Q60 205 240 158'/%3E%3Cpath d='M30 270 Q70 228 212 185'/%3E%3Cpath d='M30 240 Q80 248 186 210'/%3E%3C/g%3E%3C/svg%3E");
}
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1.02; margin: 0 0 .55rem; font-weight: 400; color: var(--bone);
  animation: rise .7s cubic-bezier(.2,.7,.2,1) both;
}
.hero .sub {
  font-family: var(--display); font-style: italic; font-weight: 300; color: var(--gold-lite);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); max-width: 42ch; margin: 0;
  animation: rise .7s .08s cubic-bezier(.2,.7,.2,1) both;
}

/* ---------- contenido ---------- */
main { padding: 8px 0 90px; }
main .wrap { counter-reset: sec; padding-top: 16px; }

h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin: 3.2rem 0 .7rem; position: relative; line-height: 1.15; color: var(--bone);
}
h2::before {
  counter-increment: sec; content: counter(sec, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500; color: var(--gold);
  letter-spacing: 0.12em; display: block; margin-bottom: .55rem;
}
h3 { font-size: 1.24rem; font-weight: 500; margin: 1.7rem 0 .4rem; color: var(--bone); }

/* enlaces de cita: hueso con subrayado oro */
a.cite { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--gold-deep); padding-bottom: 1px; transition: background .2s, border-color .2s, color .2s; }
a.cite:hover { color: var(--gold-lite); background: rgba(201,161,94,.10); border-color: var(--gold); }

main ul { max-width: var(--measure); padding-left: 1.1rem; color: var(--bone-dim); }
main li { margin: .35rem 0; }
main li::marker { color: var(--gold); }

/* ---------- answer-first (bloque "abstract") ---------- */
.answer {
  position: relative; background: linear-gradient(180deg, rgba(201,161,94,.05), rgba(18,39,68,.35));
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0; padding: 26px 30px 24px; margin: 32px 0 8px;
  font-size: 1.16rem; line-height: 1.62; max-width: none; color: var(--bone);
}
.answer::before {
  content: "RESPUESTA"; display: block; font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.2em; color: var(--gold); margin-bottom: .7rem;
}
html[lang="en"] .answer::before { content: "ANSWER"; }
html[lang="pt"] .answer::before { content: "RESPOSTA"; }
html[lang="fr"] .answer::before { content: "RÉPONSE"; }
html[lang="de"] .answer::before { content: "ANTWORT"; }
.answer p { color: var(--bone); }
.answer strong { color: var(--gold-lite); font-weight: 500; }

/* ---------- cards / evidencia ---------- */
.grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin: 24px 0; }
@media (min-width: 660px) { .grid.two { grid-template-columns: 1fr 1fr; } }
.card {
  background: linear-gradient(180deg, rgba(244,239,228,.03), rgba(10,21,38,.2));
  border: 1px solid var(--line); border-radius: 4px;
  padding: 22px 24px; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -26px rgba(0,0,0,.7); border-color: rgba(201,161,94,.4); }
.card h3 { margin-top: 0; }
.card p { max-width: none; margin-bottom: .8rem; color: var(--bone-dim); }
.doi {
  font-family: var(--mono); font-size: 0.76rem; color: var(--bone-soft); word-break: break-word;
  border-top: 1px solid var(--line); padding-top: .7rem; margin: 0;
}
.doi a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-deep); }

/* ---------- tabla comparativa ---------- */
table.compare { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 0.98rem; }
table.compare th, table.compare td { border: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top; }
table.compare th { background: var(--panel); color: var(--gold-lite); font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
table.compare td { color: var(--bone-dim); }
table.compare tr:nth-child(even) td { background: rgba(244,239,228,.03); }

/* ---------- FAQ ---------- */
.faq { margin: 16px 0; }
.faq details { border-bottom: 1px solid var(--line); padding: 6px 0; }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  font-family: var(--display); font-weight: 400; font-size: 1.14rem; color: var(--bone);
  cursor: pointer; padding: 14px 34px 14px 0; position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); color: var(--gold); font-size: 1.3rem; transition: transform .2s;
}
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0 0 16px; color: var(--bone-dim); }

/* ---------- anotaciones ---------- */
.pending {
  font-family: var(--mono); font-size: 0.74rem; background: rgba(201,161,94,.10);
  border: 1px dashed var(--gold); color: var(--gold-lite); border-radius: 3px; padding: 1px 7px;
}

/* ---------- source card (paper e5499) ---------- */
.srccard { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0; background: rgba(201,161,94,.05); padding: 18px 22px; margin: 24px 0; }
.srccard .st { font-family: var(--display); font-style: italic; font-size: 1.2rem; line-height: 1.28; color: var(--bone); }
.srccard .sm { font-size: .92rem; color: var(--bone-soft); margin-top: 8px; line-height: 1.5; }
.srccard .sm b { color: var(--bone); }
.srccard .sdoi { margin-top: 11px; font-family: var(--mono); font-size: .78rem; }
.srccard .sdoi a { color: var(--gold); border-bottom: 1px solid var(--gold-deep); }

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--line); background: var(--navy); margin-top: 48px; }
footer.site .wrap { padding: 32px 26px; max-width: 1080px; }
footer.site p { font-family: var(--mono); font-size: 0.76rem; color: var(--bone-soft); max-width: none; margin: 0; line-height: 1.7; }
footer.site a { color: var(--gold); }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}

/* ─────────── GALERÍA DE RESULTADOS (cinematográfica) ─────────── */
.galtag{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:30px 0 4px}
.plates{display:grid;gap:clamp(34px,5vw,56px);margin:18px 0 8px}
.plate .frame{position:relative;border:1px solid var(--line);padding:12px;background:linear-gradient(180deg,rgba(244,239,228,.04),rgba(10,21,38,.2))}
.plate .frame::after{content:"";position:absolute;inset:12px;border:1px solid rgba(201,161,94,.22);pointer-events:none}
.plate img{width:100%;display:block}
.plate .meta{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:14px}
.plate .meta .pn{font-family:var(--display);font-weight:300;font-size:1.9rem;color:var(--gold);opacity:.5;line-height:1}
.plate .meta .pt{font-family:var(--display);font-weight:400;font-size:1.25rem;color:var(--bone)}
.plate .meta .pt em{font-style:italic;color:var(--gold-lite)}
.plate .meta .pd{font-size:.82rem;color:var(--bone-soft);max-width:32ch;text-align:right;margin-left:auto}
.photobreak{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;min-height:min(70vh,560px);display:flex;align-items:flex-end;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(48px,7vw,90px);margin-bottom:clamp(48px,7vw,90px)}
.photobreak img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%;filter:grayscale(.4) contrast(1.05) brightness(.58)}
.photobreak .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,21,38,.5),rgba(10,21,38,.12) 40%,rgba(6,11,20,.93))}
.photobreak blockquote{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:clamp(28px,5vw,60px);font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,3vw,2.4rem);line-height:1.15;color:var(--bone)}
.photobreak blockquote em{font-style:italic;color:var(--gold-lite)}
.photobreak cite{display:block;margin-top:14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-style:normal}
.opdocs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:18px 0}
.opdoc{border:1px solid var(--line);padding:8px;background:rgba(10,21,38,.3)}
.opdoc img{width:100%;display:block}
.opdoc .l{margin-top:8px;padding:0 4px 4px;font-size:.74rem;color:var(--bone-soft)}
.opdoc .l b{display:block;font-family:var(--display);color:var(--bone);font-size:.92rem}
.galnote{max-width:66ch;font-family:var(--body);font-style:italic;font-size:.8rem;color:var(--bone-soft);border-left:1px solid var(--line);padding-left:16px;margin-top:20px}

/* ─────────── HERO con retrato (Lámina) — páginas de marca ─────────── */
.hero.pfolio .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:center;max-width:1080px}
.hero.pfolio .htext{order:1}
.hero-fig{position:relative;order:2}
.hero-fig .frame{position:relative;border:1px solid var(--line);padding:12px;background:linear-gradient(180deg,rgba(244,239,228,.04),rgba(10,21,38,.2))}
.hero-fig .frame::after{content:"";position:absolute;inset:12px;border:1px solid rgba(201,161,94,.22);pointer-events:none;z-index:2}
.hero-fig img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 14%;filter:grayscale(1) contrast(1.06) brightness(.85);display:block;background:var(--panel)}
@media(min-width:821px){.hero.pfolio .wrap{padding-top:64px;padding-bottom:40px}.hero-fig img{height:min(60vh,500px);aspect-ratio:auto}}
.hero-fig .cap{position:absolute;left:22px;bottom:20px;z-index:3;font-family:var(--body);font-style:italic;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lite)}
.hero-fig .cap b{color:var(--bone);font-weight:400;font-style:normal}
@media(max-width:820px){.hero.pfolio .wrap{grid-template-columns:1fr;gap:26px}.hero-fig{max-width:300px;margin:0 auto;order:1}.hero.pfolio .htext{order:2;text-align:center}}


/* fix móvil 09/08: tablas anchas scrollean dentro de sí mismas, no rompen la página */
@media (max-width: 700px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}