:root{
  --corcho:#c08b4b; --corcho-os:#a9763a; --papel:#f6f1e4; --papel-alt:#efe7d4;
  --tinta:#2e2a24; --gris:#6f675b; --rojo:#c0392b; --azul:#4a7ba7; --verde:#4f7942;
  --linea:#d9cfb8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--tinta);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;
  background-color:#4d3d22;
  background-image:
    radial-gradient(rgba(0,0,0,.20) 1px, transparent 1.6px),
    radial-gradient(rgba(255,240,210,.06) 1px, transparent 1.6px),
    linear-gradient(160deg,#5a4726,#463619);
  background-size:9px 9px,13px 13px,100% 100%;
  background-attachment:fixed;
}
a{color:#7a4a1f}
img{max-width:100%;height:auto;display:block}

/* ---------- Top cork bar with fichas ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background-color:var(--corcho);
  background-image:
    repeating-radial-gradient(circle at 3px 4px, rgba(120,80,40,.30) 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at 9px 11px, rgba(255,235,200,.16) 0 1px, transparent 1px 11px),
    repeating-radial-gradient(circle at 15px 6px, rgba(90,60,30,.22) 0 1.2px, transparent 1.2px 17px),
    linear-gradient(180deg, rgba(255,240,210,.10), rgba(60,40,15,.22));
  border-bottom:4px solid var(--corcho-os);
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.fichas{
  display:flex;flex-wrap:wrap;gap:16px 14px;justify-content:center;
  align-items:flex-start;max-width:1000px;margin:0 auto;padding:22px 12px 16px;
}
.ficha{
  position:relative;display:inline-block;padding:13px 16px 11px;
  background:linear-gradient(#efe7d4,#e2d7bb);color:var(--tinta);
  text-decoration:none;font-weight:600;font-size:.95rem;line-height:1;
  border:1px solid #d6c8a6;border-radius:2px;white-space:nowrap;
  box-shadow:0 3px 7px rgba(0,0,0,.30);
  transform:rotate(-1deg);transition:transform .16s, box-shadow .16s;
}
.ficha:nth-child(even){transform:rotate(1deg)}
.ficha:hover{transform:translateY(-3px) rotate(0);box-shadow:0 7px 13px rgba(0,0,0,.34)}
.ficha::before{
  content:"";position:absolute;top:-9px;left:50%;margin-left:-8px;
  width:16px;height:16px;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 30%,#fff 0 6%,#8abcdd 28%,#4a7ba7 66%,#2f5a80 100%);
  box-shadow:0 2px 3px rgba(0,0,0,.45), inset -1px -2px 3px rgba(0,0,0,.35);
}
.ficha::after{
  content:"";position:absolute;top:-11px;right:-8px;width:48px;height:19px;z-index:2;
  transform:rotate(-24deg);opacity:0;
  background:linear-gradient(135deg, rgba(74,123,167,.30), rgba(74,123,167,.48));
  border-left:1px dashed rgba(255,255,255,.5);border-right:1px dashed rgba(255,255,255,.5);
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.ficha.activa{
  transform:rotate(0) translateY(-3px);font-weight:800;
  box-shadow:0 8px 15px rgba(0,0,0,.4);
  background:linear-gradient(#f7f2e6,#e8dec4);
}
.ficha.activa::after{opacity:1}
.ficha.activa::before{
  background:radial-gradient(circle at 35% 30%,#fff 0 7%,#f08a7a 26%,#c0392b 66%,#8e2a1e 100%);
}

/* ---------- Icons (CSS only) ---------- */
.ico{display:inline-block;position:relative;width:26px;height:26px;vertical-align:-6px}
.ico-sol{border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffd76a,#f0a92e 68%,#d98a1c);
  box-shadow:0 0 0 3px rgba(240,169,46,.22),0 0 12px rgba(240,169,46,.45)}
.ico-nube{height:14px;margin-top:9px;border-radius:14px;background:#cfd8e0;
  box-shadow:0 8px 0 -4px rgba(0,0,0,.06)}
.ico-nube::before{content:"";position:absolute;top:-6px;left:4px;width:13px;height:13px;border-radius:50%;background:#cfd8e0}
.ico-nube::after{content:"";position:absolute;top:-4px;left:15px;width:10px;height:10px;border-radius:50%;background:#cfd8e0}
.ico-gota{width:15px;height:15px;margin:5px 6px;background:#4a7ba7;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.ico-viento{background:
  linear-gradient(#6f675b,#6f675b) 0 5px/17px 2px no-repeat,
  linear-gradient(#6f675b,#6f675b) 0 12px/24px 2px no-repeat,
  linear-gradient(#6f675b,#6f675b) 5px 19px/13px 2px no-repeat}
.ico-termo{width:9px;height:21px;margin:1px 9px;border:2px solid #6f675b;border-radius:6px 6px 0 0;background:#f6f1e4}
.ico-termo::after{content:"";position:absolute;bottom:-5px;left:-3px;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#e57366,#c0392b);border:2px solid #6f675b}
.ico-baro{width:24px;height:24px;border:2px solid #6f675b;border-radius:50%;background:#f6f1e4}
.ico-baro::after{content:"";position:absolute;top:11px;left:11px;width:9px;height:2px;background:#c0392b;
  transform-origin:left center;transform:rotate(-48deg)}
.ico-baro::before{content:"";position:absolute;top:9px;left:9px;width:5px;height:5px;border-radius:50%;background:#2e2a24;z-index:2}
.ico-rayo{width:18px;height:26px;background:linear-gradient(#ffd76a,#f0a92e);
  clip-path:polygon(56% 0,14% 56%,44% 56%,34% 100%,86% 40%,50% 40%)}
.ico-radar{border-radius:50%;background:radial-gradient(circle,transparent 0 3px,#4f7942 3px 4px,transparent 4px 8px,#4f7942 8px 9px,transparent 9px 13px,#4f7942 13px 14px,transparent 14px)}
.ico-radar::after{content:"";position:absolute;top:13px;left:13px;width:11px;height:2px;background:#c0392b;transform-origin:left center;transform:rotate(-35deg)}
.ico-trigo{width:6px;height:24px;margin:1px 10px;background:#4f7942;border-radius:3px}
.ico-trigo::before{content:"";position:absolute;top:1px;left:-6px;width:8px;height:8px;border-radius:50% 50% 0 50%;background:#c9a227;transform:rotate(-30deg);box-shadow:8px 5px 0 -1px #c9a227,0 11px 0 -1px #c9a227}
.ico-barco{width:26px;height:9px;margin-top:14px;background:#2e2a24;clip-path:polygon(0 0,100% 0,86% 100%,14% 100%)}
.ico-barco::before{content:"";position:absolute;top:-9px;left:3px;width:20px;height:9px;
  background:repeating-linear-gradient(90deg,#c0392b 0 5px,#4a7ba7 5px 10px,#4f7942 10px 15px)}
.ico-boya{width:20px;height:12px;margin-top:11px;background:linear-gradient(#e57366,#c0392b);border-radius:0 0 50% 50%}
.ico-boya::before{content:"";position:absolute;top:-10px;left:8px;width:4px;height:10px;background:#6f675b}
.ico-panel{width:24px;height:16px;margin-top:5px;background:#2b4a6f;border:1px solid #16283d;
  background-image:linear-gradient(#0000 calc(50% - 1px),#16283d calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px)),
  linear-gradient(90deg,#0000 calc(50% - 1px),#16283d calc(50% - 1px) calc(50% + 1px),#0000 calc(50% + 1px));
  box-shadow:inset 0 7px 9px rgba(255,255,255,.14)}

/* ---------- Pins & tape ---------- */
.pin{position:absolute;width:18px;height:18px;border-radius:50%;z-index:4;
  background:radial-gradient(circle at 35% 30%,#fff 0 7%,#f08a7a 26%,#c0392b 66%,#8e2a1e 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.45), inset -1px -2px 3px rgba(0,0,0,.32)}
.pin.azul{background:radial-gradient(circle at 35% 30%,#fff 0 7%,#8abcdd 26%,#4a7ba7 66%,#2f5a80 100%)}
.pin.verde{background:radial-gradient(circle at 35% 30%,#fff 0 7%,#9fce8f 26%,#4f7942 66%,#31502a 100%)}
.cinta{position:absolute;width:78px;height:24px;z-index:4;opacity:.92;
  background:linear-gradient(135deg, rgba(74,123,167,.26), rgba(74,123,167,.46));
  border-left:1px dashed rgba(255,255,255,.5);border-right:1px dashed rgba(255,255,255,.5);
  box-shadow:0 1px 2px rgba(0,0,0,.18)}
.cinta.verde{background:linear-gradient(135deg, rgba(79,121,66,.26), rgba(79,121,66,.46))}

/* ---------- Page sheet ---------- */
.hoja{max-width:980px;margin:26px auto 40px;background:var(--papel);
  border:1px solid var(--linea);border-radius:3px;box-shadow:0 14px 36px rgba(0,0,0,.5);overflow:hidden}
.ficha-obs{position:relative;margin:26px 18px 6px;padding:26px 28px 22px;
  background:linear-gradient(160deg,#fbf7ec,#f0e8d5);border:1px solid #e2d8bf;border-radius:3px;
  box-shadow:0 7px 16px rgba(0,0,0,.26)}
.ficha-obs .meta{font-family:"Courier New",Courier,monospace;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gris);display:flex;flex-wrap:wrap;gap:6px 20px;margin-bottom:10px}
.ficha-obs .meta b{font-weight:700;color:#8a5a2a}
.ficha-obs h1{font-family:Georgia,"Times New Roman",serif;font-weight:700;
  font-size:clamp(1.5rem,3.7vw,2.35rem);line-height:1.12;margin:.05em 0 .35em}
.ficha-obs p.lead{color:#4a4438;margin:.2em 0 0;max-width:64ch}
.ficha-obs .pin{width:20px;height:20px}

/* ---------- Notes (content cards) ---------- */
.nota{position:relative;background:linear-gradient(#f7f2e6,#efe7d4);border:1px solid #e2d8bf;
  border-radius:2px;box-shadow:0 5px 13px rgba(0,0,0,.22);padding:24px 24px 20px;margin:26px 18px}
.nota::after{content:"";position:absolute;top:-11px;left:26px;width:74px;height:23px;z-index:3;
  transform:rotate(-3deg);
  background:linear-gradient(135deg, rgba(74,123,167,.26), rgba(74,123,167,.44));
  border-left:1px dashed rgba(255,255,255,.5);border-right:1px dashed rgba(255,255,255,.5);
  box-shadow:0 1px 2px rgba(0,0,0,.16)}
.nota.gira-a{transform:rotate(-.4deg)}
.nota.gira-b{transform:rotate(.45deg)}
.nota.gira-b::after{left:auto;right:30px;transform:rotate(4deg);
  background:linear-gradient(135deg, rgba(79,121,66,.26), rgba(79,121,66,.44))}
.nota h2{font-family:Georgia,"Times New Roman",serif;font-size:1.28rem;margin:.05em 0 .5em}
.nota h3{font-family:Georgia,serif;font-size:1.05rem;margin:1.1em 0 .35em}
.nota p{margin:.55em 0;color:#3b362d}
.nota ul{margin:.5em 0 .8em;padding-left:1.25em}
.nota li{margin:.3em 0;color:#3b362d}
.nota .ico{margin-right:9px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:14px}
.tarj{padding:14px 15px;background:#fbf7ec;border:1px solid #e3d9c0;border-radius:2px;
  box-shadow:0 4px 9px rgba(0,0,0,.14)}
.tarj h3{margin:.1em 0 .3em;font-family:Georgia,serif;font-size:1rem}
.tarj p{margin:.2em 0;font-size:.94rem;color:#4a4438}
figure.foto{margin:20px 0;padding:10px 10px 6px;background:#fbf7ec;border:1px solid #e3d9c0;
  box-shadow:0 5px 12px rgba(0,0,0,.2);position:relative}
figure.foto::before{content:"";position:absolute;top:-10px;left:50%;margin-left:-38px;width:76px;height:22px;
  transform:rotate(-2deg);background:linear-gradient(135deg,rgba(74,123,167,.3),rgba(74,123,167,.48));
  border-left:1px dashed rgba(255,255,255,.5);border-right:1px dashed rgba(255,255,255,.5)}
figure.foto figcaption{font-family:"Courier New",monospace;font-size:.72rem;color:var(--gris);
  letter-spacing:.06em;text-transform:uppercase;padding:7px 2px 2px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.duo{grid-template-columns:1fr}}

/* ---------- Chips / buttons ---------- */
.chip{position:relative;display:inline-block;margin:12px 12px 4px 0;padding:12px 19px;
  background:linear-gradient(#f0e8d5,#e3d8bd);border:1px solid #ddceac;border-radius:2px;
  color:var(--tinta);text-decoration:none;font-weight:700;font-size:.95rem;
  box-shadow:0 3px 8px rgba(0,0,0,.24);transform:rotate(-.5deg);
  transition:transform .16s, box-shadow .16s}
.chip:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:0 9px 17px rgba(0,0,0,.3)}
.chip .pin{top:-9px;left:16px;width:15px;height:15px}

/* ---------- Forms ---------- */
form.nota label{display:block;font-weight:600;margin:.8em 0 .25em;font-size:.94rem}
form.nota input,form.nota select,form.nota textarea{
  width:100%;padding:10px 11px;font:inherit;font-size:.95rem;color:var(--tinta);
  background:#fbf7ec;border:1px solid #d6c8a6;border-radius:2px}
form.nota textarea{min-height:120px;resize:vertical}
form.nota .fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){form.nota .fila{grid-template-columns:1fr}}
form.nota .aviso{font-size:.82rem;color:var(--gris);margin-top:10px}
button.chip{cursor:pointer;font:inherit;font-weight:700}

/* tablas */
.tabla{width:100%;border-collapse:collapse;margin:12px 0;font-size:.93rem}
.tabla th,.tabla td{border:1px solid var(--linea);padding:9px 10px;text-align:left}
.tabla th{background:#e8dec4;font-family:Georgia,serif}

/* ---------- Footer ---------- */
.pie{margin-top:30px;background:linear-gradient(180deg,#3b2f1d,#281f12);color:#cfc3a8;
  border-top:5px solid var(--corcho-os);padding:34px 20px 26px}
.pie .wrap{max-width:1000px;margin:0 auto}
.pie .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px}
.pie h3{font-family:Georgia,serif;color:#e9dcc0;font-size:.98rem;margin:.1em 0 .5em;
  border-bottom:1px solid #4a3c24;padding-bottom:.35em}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin:.28em 0}
.pie a{color:#c9b48c;text-decoration:none;font-size:.92rem}
.pie a:hover{color:#fff;text-decoration:underline}
.pie .datos{margin-top:26px;padding-top:16px;border-top:1px solid #4a3c24;
  font-family:"Courier New",monospace;font-size:.76rem;line-height:1.75;color:#a99a7c}
.pie .minichips{margin-top:16px;display:flex;flex-wrap:wrap;gap:12px}
.pie .mini{position:relative;display:inline-block;padding:9px 14px;background:linear-gradient(#e8dec4,#d8cba6);
  color:#2e2a24;text-decoration:none;font-weight:700;font-size:.84rem;border-radius:2px;
  box-shadow:0 3px 6px rgba(0,0,0,.4);transform:rotate(-1deg)}
.pie .mini::before{content:"";position:absolute;top:-7px;left:50%;margin-left:-6px;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0 7%,#8abcdd 28%,#4a7ba7 66%,#2f5a80 100%);
  box-shadow:0 2px 3px rgba(0,0,0,.45)}

/* ---------- Cookie banner ---------- */
.cookie{position:fixed;left:12px;right:12px;bottom:12px;max-width:660px;margin:0 auto;display:none;z-index:99;
  background:linear-gradient(#fbf7ec,#efe7d4);border:1px solid #ddceac;border-radius:3px;
  box-shadow:0 10px 26px rgba(0,0,0,.45);padding:15px 17px;font-size:.9rem}
.cookie.ver{display:block}
.cookie .acciones{margin-top:10px}
.cookie button.chip{margin:4px 10px 0 0;padding:9px 15px;font-size:.88rem}

/* ---------- Mobile ---------- */
@media(max-width:640px){
  .topbar{position:static}
  .fichas{gap:12px 10px;padding:16px 8px 12px}
  .ficha{font-size:.86rem;padding:11px 12px 9px}
  .hoja{margin:14px 8px 30px}
  .ficha-obs{margin:16px 10px 4px;padding:20px 16px}
  .nota{margin:20px 10px;padding:18px 16px}
}