/* Flutaldi — hoja de estilos general */

:root{
  --bg:#181a19;
  --bg-alt:#202422;
  --light:#eef0ee;
  --light-alt:#e3e7e3;
  --line:#0d0f0e;
  --text:#e6e9e6;
  --muted:#8f9691;
  --dark:#181a19;
  --accent:#5fae86;
  --accent-deep:#2c6b4b;
  --gold:#d8c07a;
  --gold-deep:#7a6624;
  --mono:ui-monospace,Consolas,'Liberation Mono',monospace;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto;}

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}
a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}

p{margin:0 0 1.1em;max-width:70ch;}
p:last-child{margin-bottom:0;}

h1,h2,h3{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:600;
  margin:0;
}

h1{font-size:clamp(1.75rem,4.2vw,3.05rem);line-height:1.14;letter-spacing:.045em;}
h2{font-size:clamp(1.15rem,2.1vw,1.6rem);line-height:1.3;margin-bottom:1.1rem;}
h3{font-size:.98rem;line-height:1.45;letter-spacing:.1em;margin:1.9rem 0 .7rem;}

.tag{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.4rem;
  display:block;
}
.tag--num{font-size:1.55rem;letter-spacing:.06em;line-height:1;color:var(--gold);}
.muted{color:var(--muted);}

/* ---------- rejilla general ---------- */

.cells{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:5px;
  background:var(--line);
}
.cell{padding:72px 44px;background:var(--bg);min-width:0;}
.cell--alt{background:var(--bg-alt);}
.cell--light{background:var(--light);color:var(--dark);}
.cell--light-alt{background:var(--light-alt);color:var(--dark);}
.cell--accent{background:var(--accent);color:var(--dark);}
.cell--tight{padding:44px;}

.band{border-top:6px solid var(--line);}
.band--light .cell{background:var(--light);color:var(--dark);}
.band--light .cell--light-alt{background:var(--light-alt);}
.band--light .tag{color:var(--gold-deep);}
.band--light a,.cell--light a,.cell--accent a{color:var(--accent-deep);}
.band--light .muted,.cell--light .muted{color:#5a615c;}

.c3{grid-column:span 3;}
.c4{grid-column:span 4;}
.c5{grid-column:span 5;}
.c7{grid-column:span 7;}
.c8{grid-column:span 8;}
.c12{grid-column:1 / -1;}

/* ---------- cabecera ---------- */

.site-head{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:5px;
  background:var(--line);
  border-bottom:6px solid var(--line);
}
.brand{grid-column:span 4;background:var(--bg-alt);padding:26px 44px;}
.brand a{
  font-family:var(--mono);
  font-size:1.3rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--text);
  text-decoration:none;
}
.brand a:hover{color:var(--accent);}
.brand span{
  display:block;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.5rem;
}
.mainnav{grid-column:span 8;background:var(--bg);padding:26px 44px;display:flex;align-items:center;}
.mainnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px;}
.mainnav a{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text);
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:3px;
}
.mainnav a:hover,.mainnav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent);}

/* ---------- hero ---------- */

.hero{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:5px;
  background:var(--line);
  grid-template-areas:
    "ti ti ti ti ti ti ti in in in in in"
    "ti ti ti ti ti ti ti fl fl fl fl fl"
    "ix ix ix ix ix ix ix ix ix ix ix ix";
}
.hero__title{grid-area:ti;background:var(--bg);padding:76px 44px;display:flex;flex-direction:column;justify-content:center;}
.hero__title h1 span{display:block;}
.hero__title h1 .em{color:var(--accent);}
.hero__intro{grid-area:in;background:var(--accent);color:var(--dark);padding:48px 40px;}
.hero__intro p{max-width:46ch;}
.hero__field{grid-area:fl;background:var(--bg-alt);min-height:120px;position:relative;}
.hero__field::after{
  content:"";
  position:absolute;
  left:40px;right:40px;top:50%;
  height:3px;
  background:var(--gold);
  opacity:.55;
}
.hero__index{grid-area:ix;background:var(--bg-alt);padding:26px 44px;}
.hero__index ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px;}
.hero__index a{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
}
.hero__index a:hover{color:var(--accent);}
.hero__index .n{color:var(--gold);margin-right:.5em;}

/* ---------- figuras ---------- */

.figure{margin:0;}
.figure img{width:100%;border:5px solid var(--line);}
.figcap{
  font-family:var(--mono);
  font-size:.72rem;
  line-height:1.7;
  letter-spacing:.08em;
  color:var(--muted);
  margin-top:16px;
  max-width:44ch;
}
.cell--light .figcap,.band--light .figcap{color:#5a615c;}

/* ---------- listas ---------- */

ul.checks,ol.steps{margin:0 0 1.2em;padding:0 0 0 1.35em;max-width:70ch;}
ul.checks{list-style:none;padding-left:0;}
ul.checks li{position:relative;padding-left:1.6em;margin-bottom:.7em;}
ul.checks li::before{
  content:"";
  position:absolute;left:0;top:.72em;
  width:.7em;height:.7em;
  background:var(--accent);
}
ol.steps li{margin-bottom:.7em;padding-left:.3em;}
ol.steps li::marker{font-family:var(--mono);color:var(--gold);}
.band--light ol.steps li::marker{color:var(--gold-deep);}

.rule{border:0;border-top:2px solid var(--gold);opacity:.5;margin:2rem 0;max-width:220px;}

/* ---------- panel vertical (páginas internas) ---------- */

.panel{display:grid;gap:6px;background:var(--line);}
.panel__field{padding:72px 44px;background:var(--bg);}
.panel__field--alt{background:var(--bg-alt);}
.panel__field--light{background:var(--light);color:var(--dark);}
.panel__field--light a{color:var(--accent-deep);}
.panel__field--light .tag{color:var(--gold-deep);}
.panel__inner{width:58.3333%;min-width:0;}
.panel__field--tall{padding-top:104px;padding-bottom:104px;}

.contact-line{
  font-family:var(--mono);
  font-size:.9rem;
  letter-spacing:.08em;
  line-height:2;
}

/* ---------- pie ---------- */

.site-foot{border-top:6px solid var(--line);}
.foot{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:6px;
  background:var(--line);
}
.foot__cell{padding:44px;min-width:0;}
.foot__name{grid-column:span 3;background:var(--bg-alt);}
.foot__nav{grid-column:span 4;background:var(--bg);}
.foot__mail{grid-column:span 5;background:var(--light);color:var(--dark);}
.foot__mail a{color:var(--accent-deep);}
.foot__name .name{
  font-family:var(--mono);
  font-size:1.15rem;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.foot__name p{font-size:.82rem;color:var(--muted);margin-top:1rem;}
.foot__nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;}
.foot__nav a{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text);
  text-decoration:none;
}
.foot__nav a:hover{color:var(--accent);}
.foot__mail .mail{font-family:var(--mono);font-size:.95rem;letter-spacing:.05em;}
.foot__mail p{font-size:.86rem;margin-top:1rem;color:#4d544f;max-width:48ch;}

/* ---------- adaptación ---------- */

@media (max-width:1040px){
  .hero{
    grid-template-areas:
      "ti ti ti ti ti ti ti ti ti ti ti ti"
      "in in in in in in in in in in in in"
      "fl fl fl fl fl fl fl fl fl fl fl fl"
      "ix ix ix ix ix ix ix ix ix ix ix ix";
  }
  .c3,.c4,.c5,.c7,.c8{grid-column:1 / -1;}
  .brand,.mainnav{grid-column:1 / -1;}
  .foot__name,.foot__nav,.foot__mail{grid-column:1 / -1;}
  .panel__inner{width:100%;}
  .cell{padding:56px 32px;}
  .hero__title{padding:60px 32px;}
  .hero__field{min-height:84px;}
}

@media (max-width:620px){
  body{font-size:16px;}
  .cell,.panel__field,.panel__field--tall{padding:44px 20px;}
  .cell--tight{padding:24px 20px;}
  .hero__title{padding:48px 20px;}
  .hero__intro{padding:36px 20px;}
  .hero__index,.brand,.mainnav{padding:22px 20px;}
  .foot__cell{padding:32px 20px;}
  .mainnav ul{gap:10px 18px;}
  .hero__field::after{left:20px;right:20px;}
}