/* Sarvasu — hoja de estilos común */

:root{
  --bg:#171514;
  --alt:#201c19;
  --light:#ede9e3;
  --tx:#e6e1da;
  --mu:#9a9088;
  --ac:#f08a24;
  --ac2:#2f7a6e;
  --ac-dark:#8a4a06;
  --line:#0d0c0b;
  --serif:Georgia,'Times New Roman',serif;
  --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(--tx);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  overflow-x:hidden;
}

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

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

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
h1{font-size:clamp(32px,5vw,56px);line-height:1.1;letter-spacing:-.01em}
h2{font-size:clamp(24px,2.9vw,33px);line-height:1.22;margin-bottom:18px}
h3{font-size:20px;font-style:italic;line-height:1.3;margin:30px 0 10px}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}

.lead{font-size:19px;line-height:1.62}

.mark{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.17em;
  line-height:1.6;
  color:var(--ac2);
  margin:0 0 14px;
}

/* ---------- estructura general ---------- */

.wrap{max-width:1300px;margin:0 auto;padding:72px 44px}

section{border-top:6px solid var(--line)}

.s-alt{background:var(--alt)}
.s-light{background:var(--light);color:var(--bg)}
.s-light .mark{color:#1f5b53}
.s-light a{color:var(--ac-dark)}
.s-light .cap{color:#5d564e}

/* rejilla de texto: 12 columnas sin puentes */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:36px 40px}

/* rejilla con puentes: la línea oscura se ve en los huecos */
.gx{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;background:var(--line)}
.gx>*{background:var(--bg);padding:34px 30px}
.s-alt .gx>*{background:var(--alt)}
.s-light .gx>*{background:var(--light)}
.gx>.f-ac{background:var(--ac);color:var(--bg)}
.gx>.f-ac2{background:var(--ac2);color:#0f2d29}
.gx>.f-light{background:var(--light);color:var(--bg)}
.f-ac a,.f-ac2 a,.f-light a{color:var(--bg)}

.c4{grid-column:span 4}
.c5{grid-column:span 5}
.c6{grid-column:span 6}
.c7{grid-column:span 7}
.c8{grid-column:span 8}
.c3{grid-column:span 3}
.c12{grid-column:span 12}

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

.site{background:var(--alt);border-bottom:6px solid var(--line)}
.site .wrap{padding:22px 44px;display:flex;flex-wrap:wrap;gap:14px 34px;align-items:baseline;justify-content:space-between}
.brand{font-family:var(--serif);font-size:23px;color:var(--tx);text-decoration:none;letter-spacing:.02em}
.brand:hover{color:var(--ac)}
.site nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px 26px;margin:0;padding:0}
.site nav a{color:var(--tx);text-decoration:none;font-size:15px;border-bottom:2px solid transparent;padding-bottom:2px}
.site nav a:hover,.site nav a[aria-current="page"]{color:var(--ac);border-bottom-color:var(--ac)}

/* ---------- portada ---------- */

.hero{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:5px;
  background:var(--line);
  border-bottom:6px solid var(--line);
  grid-template-areas:
    "t t t t t t t i i i i i"
    "t t t t t t t f f f f f"
    "n n n n n n n n n n n n";
}
.hero>*{background:var(--bg);padding:44px 40px}
.hero .h-title{grid-area:t;display:flex;flex-direction:column;justify-content:center;padding:64px 44px}
.hero .h-intro{grid-area:i;background:var(--ac);color:var(--bg)}
.hero .h-intro p{font-size:18px;line-height:1.6}
.hero .h-field{grid-area:f;background:var(--ac2);min-height:120px;display:flex;align-items:flex-end}
.hero .h-field span{font-size:12px;letter-spacing:.17em;color:#0f2d29}
.hero .h-nav{grid-area:n;background:var(--alt);padding:24px 40px}
.hero .h-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.hero .h-nav a{font-size:14px;color:var(--tx);text-decoration:none;border-bottom:1px solid var(--ac)}
.hero .h-nav a:hover{color:var(--ac)}
.hero .h-intro .mark{color:#3a2a12}

/* ---------- imágenes ---------- */

figure{margin:0}
.shot img{border:5px solid var(--line)}
.cap{font-size:13px;line-height:1.55;color:var(--mu);margin-top:12px}
.detail{max-width:420px}

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

ul.list,ol.list{margin:0 0 18px;padding:0 0 0 2px;list-style:none}
ul.list li,ol.list li{position:relative;padding-left:24px;margin-bottom:10px}
ul.list li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:3px;background:var(--ac)}
ol.list{counter-reset:s}
ol.list li{counter-increment:s;padding-left:34px}
ol.list li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--ac2)}
.note{border-left:3px solid var(--ac2);padding-left:18px;color:var(--mu);font-size:16px}
.s-light .note{color:#5d564e}

dl{margin:0}
dt{font-family:var(--serif);font-style:italic;font-size:19px;margin-top:22px}
dd{margin:6px 0 0}

/* ---------- página Sobre el proyecto: panel vertical ---------- */

.panel{display:grid;gap:6px;background:var(--line);border-bottom:6px solid var(--line)}
.panel>section{border-top:0}
.panel-band{padding:0}
.band-dark{background:var(--bg)}
.band-alt{background:var(--alt)}
.band-light{background:var(--light);color:var(--bg)}
.band-light .mark{color:#1f5b53}
.band-light a{color:var(--ac-dark)}
.band-inner{max-width:1300px;margin:0 auto;padding:64px 44px}
.band-inner .col{max-width:none}
.b7{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.b7>*{grid-column:span 7}

/* ---------- páginas legales ---------- */

.doc h2{margin-top:0}
.doc section{border-top:0}

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

footer.site-foot{border-top:6px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;background:var(--line)}
.foot-grid>*{padding:36px 32px}
.foot-a{grid-column:span 4;background:var(--alt)}
.foot-b{grid-column:span 4;background:var(--bg)}
.foot-c{grid-column:span 4;background:var(--light);color:var(--bg)}
.foot-c a{color:var(--ac-dark)}
.foot-name{font-family:var(--serif);font-size:24px;margin:0 0 10px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:8px}
.foot-grid a{font-size:15px}
.foot-note{font-size:14px;line-height:1.6;margin-top:12px;color:#5d564e}
.foot-c .mark{color:#1f5b53}

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

@media (max-width:1000px){
  .wrap{padding:56px 32px}
  .band-inner{padding:52px 32px}
  .c4,.c5,.c6,.c7,.c8,.c3{grid-column:span 12}
  .b7>*{grid-column:span 12}
  .detail{max-width:none}
}

@media (max-width:760px){
  body{font-size:16px}
  .wrap{padding:44px 20px}
  .band-inner{padding:44px 20px}
  .site .wrap{padding:18px 20px}
  .g{gap:26px}
  .gx>*{padding:26px 22px}
  .hero{
    grid-template-areas:
      "t t t t t t t t t t t t"
      "i i i i i i i i i i i i"
      "f f f f f f f f f f f f"
      "n n n n n n n n n n n n";
  }
  .hero>*{padding:30px 22px}
  .hero .h-title{padding:40px 22px}
  .hero .h-nav{padding:22px}
  .hero .h-field{min-height:88px}
  .foot-a,.foot-b,.foot-c{grid-column:span 12}
  .foot-grid>*{padding:28px 22px}
}

.f-light .mark,.f-ac2 .mark{color:#1f5b53}
.f-ac .mark{color:#3a2a12}
.f-light .cap,.f-light .note{color:#5d564e}