@font-face{font-family:"Cormorant Garamond";src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/cormorant-garamond-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(../fonts/source-sans-3-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(../fonts/source-sans-3-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(../fonts/source-sans-3-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --papel:#f5efe4; --papel-2:#ece3d3; --tinta:#2a1f18; --tinta-suave:#5c4a3d;
  --terracota:#8e2c17; --oro:#b5852a; --oro-claro:#e2c27a; --piedra:#2b231d; --musgo:#2f6b3a;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 1.075rem/1.7 var(--sans)}
img{max-width:100%;display:block}
a{color:inherit}

/* Cabecera */
.cab{background:#fff;border-bottom:1px solid var(--papel-2)}
.cab__in{max-width:1120px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cab__logo img{height:56px;width:auto}
@media (min-width:880px){.cab__logo img{height:68px}}
.cab__nav{font:600 .82rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--terracota);white-space:nowrap;padding:10px 0}
.cab__nav:hover{text-decoration:underline;text-underline-offset:4px}

/* Franja de tocapus */
.tocapu{height:14px;background:
  linear-gradient(90deg,var(--terracota) 0 25%,var(--oro) 25% 50%,var(--piedra) 50% 75%,var(--musgo) 75% 100%) 0 0/56px 7px repeat-x,
  linear-gradient(90deg,var(--oro) 0 25%,var(--piedra) 25% 50%,var(--musgo) 50% 75%,var(--terracota) 75% 100%) 0 7px/56px 7px repeat-x}

/* Ficha */
.ficha{max-width:1120px;margin:0 auto;padding:0 16px 48px;display:grid;gap:28px}
.ficha__fig{margin:0 -16px;background:radial-gradient(120% 80% at 50% 0%,#463a30 0%,var(--piedra) 70%);padding:22px 16px 26px;display:flex;justify-content:center}
.ficha__fig img{height:min(74vh,640px);width:auto;max-width:100%;object-fit:contain;border-radius:3px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.ficha__txt{max-width:640px}
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font:600 .78rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.eyebrow .num{color:var(--terracota)}
.eyebrow .sep{width:28px;height:1px;background:var(--oro)}
h1{font:600 clamp(2.6rem,9vw,4.4rem)/1 var(--serif);margin:.35em 0 .1em;letter-spacing:-.01em}
.rol{font:500 italic clamp(1.25rem,4vw,1.55rem)/1.3 var(--serif);color:var(--terracota);margin:0 0 1.2em}
.ficha__txt p{margin:0 0 1em;max-width:62ch}
.ficha__txt .intro::first-letter{font:700 3.6em/.8 var(--serif);float:left;margin:.08em .1em 0 0;color:var(--terracota)}
.nota{margin-top:1.6em;padding-top:1em;border-top:1px solid var(--papel-2);font-size:.88rem;color:var(--tinta-suave)}

@media (min-width:880px){
  .ficha{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start;gap:56px;padding-top:44px}
  .ficha__fig{margin:0;border-radius:4px;padding:28px;position:sticky;top:24px}
  .ficha__fig img{height:min(78vh,700px)}
  .ficha__txt{padding-top:12px}
}

/* Navegación anterior / siguiente */
.pasos{max-width:1120px;margin:0 auto;padding:0 16px 56px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.paso{display:flex;align-items:center;gap:12px;text-decoration:none;background:#fff;border:1px solid var(--papel-2);border-radius:4px;padding:10px;min-height:84px;transition:border-color .2s}
.paso:hover{border-color:var(--oro)}
.paso img{width:44px;height:64px;object-fit:cover;object-position:top;border-radius:2px;flex:none}
.paso small{display:block;font:600 .7rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave)}
.paso span{font:600 1.15rem/1.15 var(--serif)}
.paso--sig{flex-direction:row-reverse;text-align:right}
.paso--vacio{visibility:hidden}
.todos{grid-column:1/-1;text-align:center;font:600 .82rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--terracota);padding:16px;text-decoration:none}
.todos:hover{text-decoration:underline;text-underline-offset:4px}

/* Portada */
.portada{background:var(--piedra);color:var(--papel);text-align:center;padding:56px 16px 48px}
.portada h1{color:#fff;margin:.2em 0 .25em}
.portada p{max-width:56ch;margin:0 auto;color:#d9cbb6}
.portada .eyebrow{justify-content:center;color:var(--oro-claro)}
.grilla{max-width:1120px;margin:0 auto;padding:36px 16px 64px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:640px){.grilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media (min-width:980px){.grilla{grid-template-columns:repeat(5,minmax(0,1fr))}}
.tarjeta{text-decoration:none;background:#fff;border:1px solid var(--papel-2);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.tarjeta:hover{transform:translateY(-2px);border-color:var(--oro)}
.tarjeta img{aspect-ratio:3/4;width:100%;object-fit:cover;object-position:50% 12%;background:var(--piedra)}
.tarjeta div{padding:10px 12px 14px}
.tarjeta small{font:600 .7rem/1 var(--sans);letter-spacing:.12em;color:var(--terracota)}
.tarjeta h2{font:600 1.25rem/1.1 var(--serif);margin:.3em 0 .15em}
.tarjeta p{margin:0;font-size:.85rem;line-height:1.35;color:var(--tinta-suave)}

/* Pie */
.pie{background:#fff;border-top:1px solid var(--papel-2)}
.pie__in{max-width:1120px;margin:0 auto;padding:22px 16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.pie img{height:62px;width:auto}
.pie p{margin:0;font-size:.85rem;color:var(--tinta-suave);line-height:1.5}
.pie strong{color:var(--tinta)}

a:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}