/* Variables del diseño. Plano naval local de Diana como fondo de portada. */
:root {
  --navy:#142b35;
  --deep:#0d2028;
  --paper:#f4f0e6;
  --ink:#273137;
  --muted:#596269;
  --brass:#aa8550;
  --line:#d8cfbf;
  --white:#fffdf7;
  --title:Georgia,'Times New Roman',serif;
  --body:Arial,Helvetica,sans-serif
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.7
}
a {
  color:inherit;
  text-underline-offset:5px
}
img {
  display:block;
  max-width:100%;
  height:auto
}
button {
  font:inherit
}
h1,h2,h3,p,figure {
  margin:0
}
p+p {
  margin-top:1rem
}
h1,h2,h3 {
  font-family:var(--title);
  font-weight:400;
  line-height:1.15
}
h1 {
  font-size:clamp(2.4rem,5vw,4.8rem)
}
h2 {
  font-size:clamp(1.9rem,3vw,2.8rem)
}
h3 {
  font-size:1.5rem
}
.wrap {
  max-width:1180px;
  margin:auto;
  padding-left:32px;
  padding-right:32px
}
.eyebrow {
  font-size:.7rem;
  letter-spacing:.19em;
  font-weight:700;
  line-height:1.7;
  color:var(--muted);
  margin-bottom:20px
}
.lead {
  font-size:1.12rem;
  max-width:720px;
  color:var(--muted)
}
.skip {
  position:absolute;
  left:15px;
  top:-100px;
  background:var(--white);
  padding:12px;
  z-index:20
}
.skip:focus {
  top:10px
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--brass);
  outline-offset:5px
}
header {
  background:var(--paper);
  border-bottom:1px solid var(--line)
}
.header-inner {
  max-width:1440px;
  padding:25px 32px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px
}
.brand {
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  font:1.35rem var(--title);
  letter-spacing:.08em;
  white-space:normal;
  max-width:100%;
  min-width:0
}
.brand-mark {
  width:54px;
  height:51px;
  flex:0 0 54px;
  object-fit:contain
}
.brand>div {
  min-width:0
}
.brand small {
  display:block;
  font:.55rem/1.25 var(--body);
  letter-spacing:.06em;
  margin-top:7px
}
header nav {
  display:flex;
  gap:21px;
  flex-wrap:wrap;
  justify-content:flex-end
}
header nav a {
  font-size:.78rem;
  text-decoration:none;
  padding:8px 0;
  border-bottom:2px solid transparent
}
header nav a:hover,header nav a[aria-current] {
  border-color:var(--brass)
}
.hero {
  background:var(--navy);
  color:var(--paper);
  position:relative;
  overflow:hidden
}
/* Plano de Diana: sustituir la URL para usar otro plano. El filtro invierte
   el papel blanco; screen lo integra con el azul. Intensidad máxima: 12 %. */
.hero:before {
  content:'';
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:url('../img/diana-formas.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:invert(1);
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.8) 60%,#000);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.8) 60%,#000);
  pointer-events:none;
}
.hero-inner {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:70px;
  padding-top:65px;
  padding-bottom:65px;
  align-items:center
}
.hero .eyebrow {
  color:#c2ad83
}
.hero h1 {
  font-size:clamp(3.4rem,6.5vw,6rem);
  letter-spacing:.035em;
  line-height:.96
}
.title-rule {
  width:64px;
  height:2px;
  background:var(--brass);
  margin:25px 0
}
.subtitle {
  font:1.7rem/1.35 var(--title)
}
.hero-description {
  color:#d1d7d6;
  font-size:.94rem;
  max-width:430px;
  margin:20px 0 27px
}
.button {
  display:inline-flex;
  align-items:center;
  gap:24px;
  text-decoration:none;
  background:var(--brass);
  color:#101f25;
  border:1px solid var(--brass);
  padding:13px 22px;
  font-size:.84rem;
  font-weight:700;
  cursor:pointer
}
.button:hover {
  background:#c09a62
}
.button:disabled {
  opacity:.7;
  cursor:default
}
.hero-photo {
  padding:12px;
  border:1px solid #9a855c;
  background:#102630;
  box-shadow:15px 15px 0 #0c202877
}
.hero-photo>img {
  width:100%;
  max-height:510px;
  object-fit:contain;
  background:#102630
}
.hero-photo figcaption {
  padding:18px 7px 5px;
  display:flex;
  flex-direction:column;
  gap:3px
}
.hero-photo figcaption span {
  font-size:.6rem;
  color:#c2ad83;
  letter-spacing:.15em
}
.hero-photo figcaption strong {
  font:1.5rem var(--title)
}
.hero-photo figcaption a {
  font-size:.75rem;
  color:#d5c8af;
  align-self:flex-end
}
.intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:85px;
  row-gap:12px;
  padding-top:76px;
  padding-bottom:76px;
  border-bottom:1px solid var(--line)
}
.intro .eyebrow {
  grid-column:1/-1;
  margin:0
}
.intro>div {
  color:var(--muted);
  font-size:.95rem
}
.collection {
  padding-top:60px;
  padding-bottom:60px
}
.section-title {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:28px
}
.section-title .eyebrow {
  margin:0 0 12px
}
.text-link {
  font-size:.85rem;
  font-weight:700;
  text-decoration:none
}
.text-link:hover {
  text-decoration:underline
}
.cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px
}
.model-card {
  border:1px solid var(--line);
  background:var(--white)
}
.model-image {
  display:block;
  text-decoration:none;
  background:#e5ded0
}
.model-image img {
  height:250px;
  width:100%;
  object-fit:contain
}
.card-body {
  padding:24px
}
.status {
  display:inline-block;
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  background:#e2e9df;
  color:#314836;
  padding:4px 8px;
  margin-bottom:14px
}
.status.building {
  background:#ece0cb;
  color:#654819
}
.model-card h3 {
  min-height:55px
}
.model-card h3 a {
  text-decoration:none
}
.material {
  font-size:.77rem;
  color:var(--muted);
  margin:12px 0 18px
}
.workbench {
  background:var(--navy);
  color:var(--paper);
  margin-top:10px
}
.workbench-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
  padding-top:65px;
  padding-bottom:65px
}
.workbench .eyebrow {
  color:#bca77f
}
.workbench p:not(.eyebrow) {
  color:#d1d7d6;
  max-width:460px;
  margin:24px 0
}
.outline {
  background:transparent;
  color:var(--paper)
}
.outline:hover {
  color:var(--deep)
}
.workbench figure {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:15px
}
.workbench img {
  height:330px;
  width:100%;
  object-fit:contain;
  background:var(--deep)
}
figcaption {
  font-size:.75rem;
  color:var(--muted)
}
.workbench figcaption {
  writing-mode:vertical-rl;
  color:#bca77f
}
.notebook {
  padding-top:70px;
  padding-bottom:75px
}
.notebook-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:35px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.notebook-link {
  text-decoration:none;
  padding:25px 22px;
  border-right:1px solid var(--line)
}
.notebook-link:first-child {
  padding-left:0
}
.notebook-link:last-child {
  border-right:0
}
.notebook-link>span {
  font:.9rem var(--title);
  color:#806338
}
.notebook-link h3 {
  margin:20px 0 14px
}
.notebook-link p {
  font-size:.83rem;
  color:var(--muted)
}
.notebook-link b {
  display:block;
  margin-top:20px;
  color:#806338
}
.notebook-link:hover {
  background:#eae2d3
}
.page-heading {
  padding-top:64px;
  padding-bottom:36px
}
.page-heading h1 {
  margin-bottom:25px
}
.section-nav {
  display:flex;
  gap:25px;
  border-bottom:1px solid var(--line);
  padding:15px 0 25px;
  flex-wrap:wrap
}
.section-nav a {
  font-size:.88rem
}
.placeholder {
  min-height:250px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px;
  text-align:center;
  background:repeating-linear-gradient(0deg,transparent,transparent 39px,#c6bba940 40px),#e9e3d6;
  color:#5f655f
}
.placeholder>span {
  font-size:3rem;
  color:#927344
}
.placeholder p {
  font:1.2rem var(--title);
  margin:14px 0
}
.placeholder small {
  font-size:.57rem;
  letter-spacing:.12em
}
.breadcrumb {
  padding-top:28px;
  font-size:.8rem;
  color:var(--muted)
}
.model-heading {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:60px;
  padding-top:38px;
  padding-bottom:60px;
  align-items:start
}
.model-heading h1 {
  font-size:clamp(2.5rem,4.5vw,4rem);
  margin-bottom:25px
}
.facts {
  margin:20px 0 25px;
  display:grid;
  gap:12px
}
.facts div {
  border-bottom:1px solid var(--line);
  padding-bottom:12px
}
.facts dt {
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted)
}
.facts dd {
  margin:4px 0 0;
  font-size:.9rem
}
.pending {
  font-size:.88rem;
  color:#695636;
  border-left:2px solid var(--brass);
  padding:10px 14px;
  background:#e9dfcb55;
  margin:20px 0
}
.detail-photo img {
  width:100%;
  height:450px;
  object-fit:contain;
  background:#e5ded0
}
.detail-photo figcaption {
  padding-top:12px
}
.model-sections {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px 60px
}
.model-sections section {
  border-top:1px solid var(--line);
  padding-top:25px
}
.model-sections h2 {
  font-size:1.9rem;
  margin-bottom:18px
}
.model-sections p:not(.eyebrow) {
  font-size:.92rem
}
.gallery-thumb {
  display:block;
  margin-top:20px;
  max-width:320px
}
.gallery-thumb img {
  height:220px;
  object-fit:contain;
  background:#e5ded0;
  width:100%
}
.back-link {
  padding-top:55px;
  padding-bottom:65px
}
.topic-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  margin:20px 0 50px
}
.topic {
  padding:25px;
  border-top:2px solid var(--brass);
  background:var(--white);
  box-shadow:0 1px 0 var(--line)
}
.topic h2 {
  font-size:1.6rem;
  margin-bottom:15px
}
.topic p {
  font-size:.9rem
}
.note {
  border-top:1px solid var(--line);
  padding:28px 0 55px
}
.note h2 {
  font-size:1.6rem;
  margin-bottom:15px
}
.note p {
  max-width:850px;
  color:var(--muted)
}
.table-scroll {
  overflow-x:auto;
  margin:30px 0
}
table {
  border-collapse:collapse;
  width:100%;
  font-size:.9rem;
  background:var(--white)
}
caption {
  text-align:left;
  font:1.6rem var(--title);
  padding-bottom:20px
}
th,td {
  padding:18px;
  text-align:left;
  border-bottom:1px solid var(--line)
}
thead {
  background:var(--navy);
  color:var(--paper)
}
tbody th {
  font-weight:400
}
.magazine {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px;
  align-items:center;
  padding-bottom:75px;
  padding-top:20px
}
.magazine-cover {
  background:var(--navy);
  color:var(--paper);
  padding:40px 30px;
  min-height:430px;
  max-width:350px;
  box-shadow:12px 12px 0 #d9cfbb;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:6px double var(--brass)
}
.magazine-cover>span {
  font-size:.6rem;
  letter-spacing:.16em
}
.magazine-cover strong {
  font:3.2rem/1.1 var(--title)
}
.magazine-cover p {
  font-size:.75rem;
  letter-spacing:.14em
}
.magazine-cover small {
  font-size:.65rem;
  color:#c3c6bc;
  margin-top:25px
}
.magazine h2 {
  margin-bottom:25px
}
.fine-print {
  font-size:.78rem;
  color:var(--muted);
  margin-top:20px
}
footer {
  background:var(--deep);
  color:#ced4d1;
  padding:35px 0
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  font-size:.75rem
}
.footer-inner strong {
  font:1.2rem var(--title);
  letter-spacing:.08em
}
.footer-inner p {
  margin-top:6px
}
.footer-inner a {
  white-space:nowrap
}
dialog {
  max-width:min(95vw,1000px);
  max-height:95vh;
  border:1px solid var(--brass);
  padding:18px;
  background:var(--paper);
  color:var(--ink)
}
dialog::backdrop {
  background:#06151dea
}
.visor-top {
  display:flex;
  justify-content:space-between;
  gap:30px;
  margin-bottom:15px;
  font-size:.9rem
}
.visor-top button {
  padding:5px 15px;
  background:var(--navy);
  color:var(--paper);
  border:0;
  cursor:pointer
}
#visor-imagen {
  max-height:78vh;
  width:auto;
  max-width:100%;
  margin:auto;
  object-fit:contain
}

@media(max-width:1050px) {
  .header-inner {
  align-items:flex-start;
  flex-direction:column;
  gap:18px
}
header nav {
  justify-content:flex-start;
  gap:15px 23px
}
.hero-inner {
  gap:35px
}
.cards {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.notebook-grid {
  grid-template-columns:repeat(2,1fr)
}
.notebook-link {
  border-bottom:1px solid var(--line)
}
.notebook-link:first-child {
  padding-left:22px
}
.topic-grid {
  grid-template-columns:repeat(2,1fr)
}

}

@media(max-width:650px) {
  .home-hero .hero-inner {
  grid-template-columns:minmax(0,1fr)
}
.home-hero .hero-copy {
  min-width:0
}
  .hero.home-hero h1 {
  font-size:clamp(2.3rem,12.5vw,3.8rem)
}
  .wrap {
  padding-left:22px;
  padding-right:22px
}
.header-inner {
  padding:20px 22px
}
.brand {
  font-size:1.2rem
}
header nav {
  gap:8px 18px
}
header nav a {
  font-size:.74rem
}
.hero-inner,.intro,.workbench-inner,.model-heading,.model-sections,.magazine {
  grid-template-columns:1fr;
  gap:30px
}
.hero-inner {
  padding-top:45px;
  padding-bottom:40px
}
.hero h1 {
  font-size:3.8rem
}
.hero-photo {
  box-shadow:none
}
.hero-photo>img {
  max-height:400px
}
.intro {
  padding-top:45px;
  padding-bottom:45px
}
.cards,.topic-grid {
  grid-template-columns:1fr
}
.collection {
  padding-top:40px;
  padding-bottom:40px
}
.section-title {
  align-items:flex-start;
  flex-direction:column;
  gap:12px
}
.workbench-inner {
  padding-top:45px;
  padding-bottom:45px
}
.notebook-grid {
  grid-template-columns:1fr
}
.notebook-link {
  border-right:0;
  padding:22px
}
.notebook-link:first-child {
  padding-left:22px
}
.notebook-link h3 {
  margin-top:8px
}
.page-heading {
  padding-top:40px
}
.model-heading {
  padding-top:25px
}
.detail-photo img {
  height:350px
}
.model-sections {
  gap:30px
}
.magazine {
  gap:45px
}
.magazine-cover {
  width:100%;
  max-width:350px
}
.footer-inner {
  align-items:flex-start;
  flex-direction:column;
  gap:18px
}
th,td {
  padding:12px;
  min-width:130px
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

}