/* OBKGREEN · Sistema de diseño + base responsive (mobile-first) */

/* ---------- 1. Tokens ---------- */
:root {
  --c-bg:       #0e1a15;  /* verde bosque muy oscuro */
  --c-bg-alt:   #13241d;  /* secciones alternas */
  --c-surface:  #1a2f26;  /* tarjetas */
  --c-text:     #ece8dd;  /* hueso (contraste ~14:1 sobre bg) */
  --c-muted:    #b4bfb6;  /* texto secundario (~8:1) */
  --c-accent:   #c9a961;  /* latón/dorado suave */
  --c-line:     rgba(236, 232, 221, .14);

  --f-head: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4.5rem;
  --radius: 10px;
  --header-h: 68px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { margin: 0; background: var(--c-bg); color: var(--c-text);
       font: 1.0625rem/1.7 var(--f-body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-head); font-weight: 600; line-height: 1.2; margin: 0 0 var(--s-2); }
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p  { margin: 0 0 var(--s-2); max-width: 68ch; }

:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s-2); top: -4rem; background: var(--c-accent); color: #111; padding: .5rem 1rem; z-index: 100; }
.skip-link:focus { top: var(--s-1); }

.container { width: min(1100px, 100% - 2rem); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2rem); }

/* ---------- 3. Cabecera y menú ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(14, 26, 21, .94);
               backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: .75rem; color: var(--c-text); text-decoration: none;
         font-family: var(--f-head); font-size: 1.15rem; letter-spacing: .04em; }
.brand img { border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.nav-toggle { background: none; border: 1px solid var(--c-line); border-radius: 8px; width: 46px; height: 46px; cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after
  { display: block; width: 22px; height: 2px; background: var(--c-text); margin: auto; position: relative; transition: transform .2s; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; } .nav-toggle__bars::after { top: 7px; }

/* Móvil: panel desplegable */
.nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
       background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.nav.is-open { display: block; }
.nav ul { list-style: none; margin: 0; padding: var(--s-1) 1rem var(--s-2); }
.nav a { display: block; padding: .85rem 0; color: var(--c-text); text-decoration: none; border-bottom: 1px solid var(--c-line); }
.nav a:hover, .nav a.is-active { color: var(--c-accent); }

/* ---------- 4. Hero ---------- */
.hero { padding: var(--s-5) 0; background: radial-gradient(ellipse at 20% 0%, #1d3a2d 0%, var(--c-bg) 65%); }
.hero-inner h1 { max-width: 18ch; }
.lead { font-size: 1.2rem; color: var(--c-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0; }
.hero-note { color: var(--c-muted); font-size: .95rem; }

.btn { display: inline-block; padding: .8rem 1.4rem; border-radius: 999px; font: inherit; font-weight: 600;
       text-decoration: none; cursor: pointer; border: 1px solid var(--c-accent); min-height: 44px; }
.btn--primary { background: var(--c-accent); color: #14130f; }
.btn--primary:hover { background: #dcc080; }
.btn--ghost { background: transparent; color: var(--c-accent); }
.btn--ghost:hover { background: rgba(201, 169, 97, .12); }

/* ---------- 5. Secciones ---------- */
.section { padding: var(--s-5) 0; }
.section--alt { background: var(--c-bg-alt); }
.grid-2 { display: grid; gap: var(--s-3); }
.panel { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--s-3); }
.placeholder { color: var(--c-muted); border: 1px dashed var(--c-line); padding: var(--s-3); border-radius: var(--radius); }
.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: 1.15rem; }

/* ---------- 6. Pie ---------- */
.site-footer { border-top: 1px solid var(--c-line); padding: var(--s-3) 0; color: var(--c-muted); font-size: .95rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1); }
.footer-inner p { margin: 0; }

/* ---------- 7. Tablet / escritorio ---------- */
@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .nav { display: block; position: static; background: none; border: 0; }
  .nav ul { display: flex; gap: var(--s-3); padding: 0; }
  .nav a { padding: .5rem 0; border: 0; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .hero { padding: 7rem 0; }
}

/* ---------- 8. Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- 9. Galería ---------- */
.gallery { display: grid; gap: var(--s-2); grid-template-columns: 1fr; }
@media (min-width: 600px)  { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--c-line); }

/* ---------- 10. Acordeón de normativa (<details> nativo) ---------- */
.accordion { margin-top: var(--s-3); border-top: 1px solid var(--c-line); }
.acc { border-bottom: 1px solid var(--c-line); }
.acc summary { cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
               font-family: var(--f-head); font-size: 1.2rem; font-weight: 600; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; position: absolute; right: .25rem; top: .8rem; font-size: 1.6rem; color: var(--c-accent); }
.acc[open] summary::after { content: "\2212"; }
.acc__body { padding: 0 0 var(--s-2); }
.acc__body ul { margin: 0; padding-left: 1.2rem; }
.acc__body li { margin-bottom: .8rem; max-width: 68ch; }
#acc-toggle { margin-top: var(--s-1); }

/* ---------- 11. Verificación de edad ---------- */
.age-gate { border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface);
            color: var(--c-text); width: min(460px, 100% - 2rem); padding: var(--s-4) var(--s-3); text-align: center; }
.age-gate::backdrop { background: rgba(5, 12, 9, .92); backdrop-filter: blur(6px); }
.age-gate img { margin: 0 auto var(--s-2); border-radius: 50%; }
.age-gate p { margin-inline: auto; }
.age-gate__actions { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-3); }

/* ---------- 12. Efectos visuales ---------- */
/* Botones: elevación al pasar y pulsación */
.btn { transition: background .2s, color .2s, transform .2s, box-shadow .2s, border-color .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(201, 169, 97, .22); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* Botón "Copiar correo": cambia a dorado y muestra ✓ */
.btn.is-copied { background: var(--c-accent); color: #14130f; animation: pop .35s ease; }
.btn.is-copied::before { content: "\2713\00a0"; }
.btn.is-error { border-color: #e0846f; color: #e0846f; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Cabecera: sombra al hacer scroll */
.site-header { transition: box-shadow .25s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }

/* Menú: subrayado animado y sección activa */
@media (min-width: 860px) {
  .nav a { position: relative; }
  .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--c-accent);
                  transform: scaleX(0); transform-origin: left; transition: transform .25s; }
  .nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
}

/* Tarjetas y galería */
.panel { transition: transform .25s, border-color .25s; }
.panel:hover { transform: translateY(-4px); border-color: var(--c-accent); }
.gallery figure { overflow: hidden; border-radius: var(--radius); }
.gallery img { transition: transform .5s ease; }
.gallery figure:hover img { transform: scale(1.05); }

/* Aparición única al hacer scroll (la añade el JS) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Entrada del hero (se ejecuta una vez al cargar) */
.hero-inner > * { animation: rise .7s both; }
.hero-inner > :nth-child(2) { animation-delay: .12s; }
.hero-inner > :nth-child(3) { animation-delay: .24s; }
.hero-inner > :nth-child(4) { animation-delay: .36s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-inner > *, .btn.is-copied { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 13. Copy: datos, valores y pasos ---------- */
.facts { display: grid; gap: var(--s-2); margin: var(--s-4) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--c-line); }
.facts dt { color: var(--c-muted); font-size: .9rem; }
.facts dd { margin: 0; font-weight: 600; }
.hero-inner > :nth-child(5) { animation-delay: .48s; }
.values { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: var(--s-3); }
.values li { border-left: 2px solid var(--c-accent); padding-left: var(--s-2); }
.values h3 { font-size: 1.1rem; margin-bottom: .25rem; }
.values p { margin: 0; color: var(--c-muted); }
.steps { list-style: none; counter-reset: step; margin: var(--s-3) 0; padding: 0; display: grid; gap: var(--s-2); }
.steps li { counter-increment: step; position: relative; padding: var(--s-2) var(--s-2) var(--s-2) 4rem;
            background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); }
.steps li::before { content: counter(step); position: absolute; left: 1rem; top: 1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
                    display: grid; place-items: center; background: var(--c-accent); color: #14130f; font-weight: 700; }
.steps h3 { margin: 0 0 .25rem; } .steps p { margin: 0; color: var(--c-muted); }
.req { margin: 0; padding-left: 1.2rem; } .req li { margin-bottom: .5rem; }
@media (min-width: 860px) {
  .facts, .values { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li { padding: 4.2rem var(--s-2) var(--s-2); }
  .steps li::before { left: var(--s-2); top: 1.1rem; }
}

/* ---------- 14. Lightbox ---------- */
.gallery__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); }
.lightbox { background: transparent; border: 0; padding: var(--s-2); width: min(1000px, 100%); max-width: 100%; color: var(--c-text); }
.lightbox::backdrop { background: rgba(5, 12, 9, .94); }
.lightbox figure { margin: 0; }
.lightbox img { width: 100%; max-height: 72vh; object-fit: contain; border-radius: var(--radius); }
.lightbox figcaption { text-align: center; color: var(--c-muted); padding-top: var(--s-1); }
.lightbox__bar { display: flex; justify-content: center; gap: var(--s-1); margin-top: var(--s-2); }

/* ---------- 15. Buscador de normativa ---------- */
.search { margin-top: var(--s-2); }
#norm-search { width: 100%; max-width: 460px; padding: .8rem 1.1rem; font: inherit; color: var(--c-text);
               background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 999px; }
.search__count { color: var(--c-muted); font-size: .95rem; margin: .5rem 0 0; min-height: 1.5em; }