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

:root{
  --bg:#f0eef4;
  --bg-alt:#e2dfea;
  --ink:#1d1a24;
  --mut:#6a6577;
  --dark:#241f2e;
  --acc:#5a4c8c;
  --ocre:#a3762a;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

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

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

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

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

h1,h2,h3{font-family:var(--serif);font-weight:700;margin:0}

h1{font-size:clamp(34px,5.6vw,62px);line-height:1.06;letter-spacing:-.015em}
h2{font-size:28px;line-height:30.6px;letter-spacing:-.01em}
h3{font-size:19px;line-height:1.45;margin:34px 0 10px}

p{margin:0 0 22px}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,4.5vw,44px)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px}

/* ---------- Cabecera ---------- */
.site-head{padding:26px 0 22px;background:var(--bg)}
.head-in{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:baseline;justify-content:space-between}
.brand{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:.01em}
.brand:hover{color:var(--acc)}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;padding:0}
.site-nav a{font-size:15px;color:var(--mut);text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--acc)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--acc)}

/* ---------- Héroe ---------- */
.hero{padding:56px 0 0}
.hero-main{grid-column:1/8}
.hero-intro{grid-column:9/13;font-size:17px;color:var(--mut);padding-top:8px}
.hero-intro strong{color:var(--ink);font-weight:600}

.axis{position:relative;height:104px;margin-top:40px}
.axis-bar{position:absolute;top:0;left:0;right:0;height:1px;background:var(--acc)}
.axis-drop{position:absolute;top:0;width:1px;background:var(--acc)}
.axis-drop::after{content:"";position:absolute;bottom:-8px;left:-3.5px;width:8px;height:8px;background:var(--acc)}
.d1{left:6%;height:42px}
.d2{left:33%;height:84px}
.d3{left:61%;height:58px}

/* ---------- Imagen principal ---------- */
.figure-main{margin:0;padding-bottom:80px}
.figure-main .fig-cap{grid-column:1/4;align-self:end;padding-bottom:4px}
.figure-main .fig-img{grid-column:4/13}
.fig-cap{font-size:12px;line-height:1.6;color:var(--mut)}
.fig-cap b{display:block;font-weight:600;color:var(--ocre);font-style:normal;margin-bottom:4px}

/* ---------- Secciones ---------- */
section{padding-block:80px}
.sec-alt{background:var(--bg-alt)}
.sec-dark{background:var(--dark);color:var(--bg)}

.sec-head{grid-column:1/4;position:relative}
.sec-body{grid-column:5/12}
.sec-head::before{content:"";position:absolute;left:-18px;top:12px;width:8px;height:8px;background:var(--acc)}
.sec-dark .sec-head::before{background:var(--ocre)}
.sec-num{display:block;font-size:12px;letter-spacing:.14em;color:var(--ocre);margin-bottom:10px;font-variant-numeric:tabular-nums}
.sec-dark .sec-head h2{color:var(--bg)}
.sec-dark p{color:#d9d5e2}
.sec-dark a{color:#c9bdf0}

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

ul.check,ul.plain{list-style:none;margin:26px 0 0;padding:0}
ul.check li,ul.plain li{position:relative;padding-left:22px;margin-bottom:14px}
ul.check li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:7px;background:var(--acc)}
ul.plain li::before{content:"";position:absolute;left:0;top:13px;width:9px;height:1px;background:var(--ocre)}
.sec-dark ul.check li::before{background:var(--ocre)}
ul.check li b,ul.plain li b{font-weight:600}

dl.terms{margin:26px 0 0}
dl.terms dt{font-family:var(--serif);font-size:18px;font-weight:700;margin-top:24px}
dl.terms dd{margin:4px 0 0}

/* ---------- Sección oscura con imagen de detalle ---------- */
.dark-media{grid-column:1/6;margin:48px 0 0}
.dark-side{grid-column:7/13;margin-top:48px}
.sec-dark .fig-cap{color:#9d97ad;margin-top:12px}
.sec-dark .fig-cap b{color:var(--ocre)}

/* ---------- Página interior (About / legales) ---------- */
.page-head{padding:56px 0 46px}
.page-head .ph-title{grid-column:1/8}
.page-head .ph-intro{grid-column:9/13;color:var(--mut);font-size:16px;padding-top:8px}

.axis-page{position:relative;height:64px;margin-top:34px}
.axis-page .axis-bar{background:var(--acc)}
.axis-page .d1{height:28px}
.axis-page .d2{height:50px}
.axis-page .d3{height:36px}

.doc{padding-block:0 80px;position:relative}
.doc .grid{position:relative}
.doc .rule{grid-column:4/5;grid-row:1/span 40;position:relative}
.doc .rule::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#c9c4d6}
.doc h2{grid-column:1/4;position:relative;margin-top:58px}
.doc h2::before{content:"";position:absolute;left:-18px;top:12px;width:8px;height:8px;background:var(--acc)}
.doc .body{grid-column:5/12;margin-top:58px}
.doc .body.first,.doc h2.first{margin-top:0}

/* ---------- Pie ---------- */
.site-foot{background:var(--dark);color:var(--bg);padding:64px 0 56px}
.foot-top{display:flex;flex-wrap:wrap;gap:10px 32px;align-items:baseline;justify-content:space-between}
.foot-name{font-family:var(--serif);font-size:26px;font-weight:700}
.foot-mail{font-size:17px}
.foot-mail a{color:#c9bdf0}
.foot-line{height:1px;background:rgba(240,238,244,.28);margin:26px 0 24px}
.foot-links{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 20px;padding:0}
.foot-links a{font-size:15px;color:#d9d5e2;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.foot-links a:hover{border-bottom-color:var(--ocre);color:#fff}
.foot-note{font-size:13px;line-height:1.75;color:#9d97ad;max-width:66ch;margin:0}

/* ---------- Adaptación ---------- */
@media (max-width:900px){
  section{padding-block:48px}
  .hero{padding-top:34px}
  .hero-main,.hero-intro,.sec-head,.sec-body,
  .figure-main .fig-cap,.figure-main .fig-img,
  .dark-media,.dark-side,
  .page-head .ph-title,.page-head .ph-intro,
  .doc h2,.doc .body{grid-column:1/-1}
  .hero-intro{padding-top:26px}
  .figure-main{padding-bottom:48px}
  .figure-main .fig-cap{order:2;margin-top:12px}
  .figure-main .fig-img{order:1}
  .dark-media,.dark-side{margin-top:30px}
  .sec-head{margin-bottom:22px}
  .sec-head::before,.doc h2::before{left:0;top:-18px}
  .sec-head,.doc h2{padding-top:0}
  .doc .rule{display:none}
  .doc h2{margin-top:44px;padding-top:14px}
  .doc .body{margin-top:14px}
  .axis{height:78px;margin-top:30px}
  .page-head{padding-bottom:34px}
  h2{font-size:25px;line-height:1.25}
  .lead{font-size:18px}
  .foot-mail{word-break:break-word}
}

@media (max-width:560px){
  body{font-size:16px}
  .site-nav ul{gap:8px 18px}
  .foot-name{font-size:22px}
}