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

:root{
  --paper:#f2ebe0;
  --paper-alt:#e7d9c6;
  --dark:#4a2c1e;
  --ink:#241a14;
  --ink-soft:#6e5b4c;
  --accent:#c05a2b;
  --accent-2:#6b7a5a;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --step:80px;
  --gap:28px;
}

*,*::before,*::after{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.7;
  overflow-x:hidden;
}

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

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

h1,h2,h3{
  font-family:var(--sans);
  font-weight:800;
  color:var(--ink);
  margin:0 0 .6em;
}

h1{
  font-size:clamp(2.4rem,6.2vw,4.3rem);
  line-height:.98;
  letter-spacing:-0.035em;
}

h2{
  font-size:clamp(1.5rem,3vw,2.15rem);
  line-height:1.06;
  letter-spacing:-0.02em;
}

h3{
  font-size:clamp(1.1rem,2vw,1.3rem);
  line-height:1.2;
  letter-spacing:-0.01em;
}

p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}

/* ---------- costuras / puntadas ---------- */

.stitch,
.stitch-t,
.stitch-b,
.stitch-l,
.stitch-r,
.stitch-lr,
.stitch-tb,
.stitch-lb,
.stitch-tr{
  background-repeat:no-repeat;
}

.stitch{
  background-image:
    repeating-linear-gradient(90deg,var(--accent) 0 14px,transparent 14px 26px),
    repeating-linear-gradient(90deg,var(--accent) 0 14px,transparent 14px 26px),
    repeating-linear-gradient(0deg,var(--accent) 0 14px,transparent 14px 26px),
    repeating-linear-gradient(0deg,var(--accent) 0 14px,transparent 14px 26px);
  background-size:100% 2px,100% 2px,2px 100%,2px 100%;
  background-position:0 0,0 100%,0 0,100% 0;
}

.stitch-l{
  background-image:repeating-linear-gradient(0deg,var(--accent) 0 14px,transparent 14px 26px);
  background-size:2px 100%;
  background-position:0 0;
  padding-left:var(--gap);
}

.stitch-r{
  background-image:repeating-linear-gradient(0deg,var(--accent) 0 14px,transparent 14px 26px);
  background-size:2px 100%;
  background-position:100% 0;
  padding-right:var(--gap);
}

.stitch-lr{
  background-image:
    repeating-linear-gradient(0deg,var(--accent) 0 14px,transparent 14px 26px),
    repeating-linear-gradient(0deg,var(--accent) 0 14px,transparent 14px 26px);
  background-size:2px 100%,2px 100%;
  background-position:0 0,100% 0;
  padding:0 var(--gap);
}

.stitch-b{
  background-image:repeating-linear-gradient(90deg,var(--accent) 0 14px,transparent 14px 26px);
  background-size:100% 2px;
  background-position:0 100%;
  padding-bottom:26px;
}

.stitch-t{
  background-image:repeating-linear-gradient(90deg,var(--accent) 0 14px,transparent 14px 26px);
  background-size:100% 2px;
  background-position:0 0;
  padding-top:26px;
}

.stitch-lb{
  background-image:
    repeating-linear-gradient(0deg,var(--accent) 0 14px,transparent 14px 26px),
    repeating-linear-gradient(90deg,var(--accent) 0 14px,transparent 14px 26px);
  background-size:2px 100%,100% 2px;
  background-position:0 0,0 100%;
  padding:0 0 26px var(--gap);
}

.stitch-tr{
  background-image:
    repeating-linear-gradient(0deg,var(--accent) 0 14px,transparent 14px 26px),
    repeating-linear-gradient(90deg,var(--accent) 0 14px,transparent 14px 26px);
  background-size:2px 100%,100% 2px;
  background-position:100% 0,0 0;
  padding:26px var(--gap) 0 0;
}

/* separador doble: línea continua + puntada */
.rule{
  border:0;
  height:7px;
  margin:var(--step) 0;
  background-image:
    linear-gradient(var(--ink-soft),var(--ink-soft)),
    repeating-linear-gradient(90deg,var(--accent-2) 0 14px,transparent 14px 26px);
  background-size:100% 1px,100% 2px;
  background-position:0 0,0 6px;
  background-repeat:no-repeat;
}

.rule--tight{margin:48px 0;}

/* separador simple de ancho de columna */
.hairline{
  border:0;
  height:2px;
  margin:34px 0;
  background-image:repeating-linear-gradient(90deg,var(--ink-soft) 0 10px,transparent 10px 20px);
  background-size:100% 2px;
  background-repeat:no-repeat;
}

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

.wrap{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  row-gap:34px;
}

.skip{
  position:absolute;
  left:-9999px;
}
.skip:focus{
  position:static;
  display:inline-block;
  margin:12px 24px;
  background:var(--accent);
  color:var(--paper);
  padding:8px 14px;
}

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

.site-head{
  padding:22px 0 18px;
  background:var(--paper);
}

.site-head__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 28px;
}

.brand{
  font-family:var(--sans);
  font-weight:800;
  font-size:1.32rem;
  letter-spacing:-0.03em;
  color:var(--ink);
  text-decoration:none;
}
.brand span{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin-top:4px;
}

.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
}
.site-nav a{
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
  text-decoration:none;
  padding:4px 0 6px;
  background-image:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px);
  background-size:100% 2px;
  background-position:0 100%;
  background-repeat:no-repeat;
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{
  color:var(--accent);
  background-image:linear-gradient(var(--accent),var(--accent));
}

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

.hero{padding:24px 0 0;}

.hero__frame{
  padding:44px 28px 40px;
}

.hero__title{
  grid-column:1 / 9;
  margin-bottom:0;
}
.hero__kicker{
  grid-column:1 / 13;
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin:0 0 18px;
}
.hero__lead{
  grid-column:9 / 13;
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.65;
}
.hero__lead strong{color:var(--ink);font-weight:600;}

.hero__body{
  grid-column:1 / 7;
  align-self:end;
}

.figure{margin:0;}
.figure img{width:100%;}
.figure__inner{padding:12px;}
.figure figcaption{
  font-family:var(--sans);
  font-size:.78rem;
  line-height:1.5;
  color:var(--ink-soft);
  margin-top:12px;
  max-width:38ch;
}

.hero__figure{
  grid-column:7 / 13;
  align-self:end;
}

/* ---------- secciones de texto ---------- */

.section{padding:0;}

.num{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--accent-2);
  display:block;
  margin-bottom:10px;
}

.col-left-7{grid-column:1 / 8;}
.col-right-5{grid-column:8 / 13;}
.col-left-5{grid-column:1 / 6;}
.col-right-7{grid-column:6 / 13;}
.col-left-8{grid-column:1 / 9;}
.col-right-6{grid-column:7 / 13;}
.col-left-6{grid-column:1 / 7;}
.col-mid-7{grid-column:3 / 10;}
.col-full{grid-column:1 / 13;}

.aside-note{
  font-family:var(--sans);
  font-size:.88rem;
  line-height:1.6;
  color:var(--ink-soft);
  align-self:start;
}
.aside-note strong{color:var(--ink);}

.band{
  background:var(--paper-alt);
  padding:var(--step) 0;
  margin:var(--step) 0;
}

.checklist{
  list-style:none;
  margin:0;
  padding:0;
}
.checklist li{
  position:relative;
  padding-left:26px;
  margin-bottom:12px;
  font-size:1rem;
  line-height:1.6;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:12px;
  height:2px;
  background:var(--accent);
}

ol.steps{
  margin:0;
  padding-left:1.3em;
}
ol.steps li{
  margin-bottom:12px;
  font-size:1rem;
  line-height:1.6;
}
ol.steps li::marker{
  font-family:var(--sans);
  font-weight:700;
  color:var(--accent-2);
}

/* ---------- sección oscura ---------- */

.dark{
  background:var(--dark);
  color:var(--paper);
  padding:var(--step) 0;
  margin:var(--step) 0;
}
.dark h2,.dark h3{color:var(--paper);}
.dark .num{color:#c9b79f;}
.dark a{color:#e8a97f;}
.dark .figure figcaption{color:#c9b79f;}
.dark .checklist li::before{background:#e8a97f;}
.dark .hairline{
  background-image:repeating-linear-gradient(90deg,#8a6a55 0 10px,transparent 10px 20px);
}
.dark .stitch,
.dark .stitch-l,
.dark .stitch-r,
.dark .stitch-lr,
.dark .stitch-t,
.dark .stitch-b{
  background-image:
    repeating-linear-gradient(0deg,#e8a97f 0 14px,transparent 14px 26px);
  background-size:2px 100%;
  background-position:0 0;
}

.dark__figure{grid-column:2 / 7;}
.dark__text{grid-column:8 / 13;align-self:center;}

/* ---------- About ---------- */

.about-block{margin-bottom:64px;}
.about-block:last-child{margin-bottom:0;}
.about-8{grid-column:1 / 9;}
.about-6{grid-column:7 / 13;}
.about-7{grid-column:2 / 9;}

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

.doc{grid-column:1 / 9;}
.doc-aside{
  grid-column:10 / 13;
  font-family:var(--sans);
  font-size:.85rem;
  line-height:1.6;
  color:var(--ink-soft);
  align-self:start;
}
.doc h2{margin-top:2.2em;}
.doc h2:first-of-type{margin-top:1.2em;}
.doc ul{padding-left:1.2em;}
.doc li{margin-bottom:10px;}

.meta-line{
  font-family:var(--sans);
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--ink-soft);
}

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

.site-foot{
  background:var(--paper-alt);
  margin-top:var(--step);
  padding:0 0 40px;
}
.site-foot__inner{padding:16px;}
.site-foot__box{
  padding:34px 26px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  row-gap:30px;
}
.foot-left{grid-column:1 / 7;}
.foot-right{grid-column:8 / 13;}
.foot-name{
  font-family:var(--sans);
  font-weight:800;
  font-size:1.2rem;
  letter-spacing:-0.02em;
  margin:0 0 8px;
}
.foot-left p{
  font-size:.95rem;
  color:var(--ink-soft);
  max-width:44ch;
}
.foot-right ul{
  list-style:none;
  margin:0 0 16px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
}
.foot-right a{
  font-family:var(--sans);
  font-size:.9rem;
  font-weight:600;
}
.foot-mail{font-size:.98rem;}
.foot-bottom{
  margin-top:26px;
  font-family:var(--sans);
  font-size:.78rem;
  color:var(--ink-soft);
}

/* ---------- responsive ---------- */

@media (max-width:1000px){
  .hero__title{grid-column:1 / 13;}
  .hero__lead{
    grid-column:1 / 13;
    padding-left:0;
    padding-top:26px;
    background-image:repeating-linear-gradient(90deg,var(--accent) 0 14px,transparent 14px 26px);
    background-size:100% 2px;
    background-position:0 0;
  }
  .hero__body,
  .hero__figure,
  .dark__figure,
  .dark__text,
  .col-left-7,.col-right-5,.col-left-5,.col-right-7,
  .col-left-8,.col-right-6,.col-left-6,.col-mid-7,
  .about-8,.about-6,.about-7,
  .doc,.doc-aside{grid-column:1 / 13;}
}

@media (max-width:720px){
  :root{--step:48px;--gap:20px;}
  body{font-size:17px;}
  .wrap{padding:0 18px;}
  .hero__frame{padding:28px 18px 30px;}
  .stitch-l,.stitch-lb{padding-left:18px;}
  .stitch-r{padding-right:18px;}
  .stitch-lr{padding:0 18px;}
  .stitch-tr{padding:20px 18px 0 0;}
  .site-foot__box{padding:26px 18px;}
  .foot-left,.foot-right{grid-column:1 / 13;}
  .about-block{margin-bottom:44px;}
  .site-nav ul{gap:4px 16px;}
  .site-nav a{font-size:.85rem;}
}