/* Ochoa Ink — estilos propios (además de Tailwind, que se carga como script).
   Portado del mockup original; se han quitado las reglas que solo servían
   para el router de una sola página (ya no hace falta: cada vista es ahora
   una URL real de WordPress). */

  :root { color-scheme: dark; }
  html { scroll-padding-top: 88px; }
  body { background:#0a0a0b; color:#efe9dd; font-family:"Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
  ::selection { background:#b5121b; color:#fff; }
  a { text-underline-offset: 4px; }
  :focus-visible { outline:2px solid #d81b27; outline-offset:3px; border-radius:2px; }

  /* grano de tinta sobre todo el sitio */
  body::after{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.06; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  .font-display { font-family:"Bodoni Moda",Georgia,serif; }
  .font-cond { font-family:"Barlow Condensed","Arial Narrow",sans-serif; }
  .eyebrow { font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.28em; font-size:.8rem; font-weight:600; color:#d81b27; }
  .h2 { font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; font-weight:700; letter-spacing:.02em; line-height:.95; font-size:clamp(2.2rem,5.5vw,4rem); }
  .lead { color:#a19c92; font-size:1.05rem; line-height:1.7; max-width:60ch; }

  /* botones */
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.9rem 1.6rem; font-family:"Barlow Condensed",sans-serif; font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.95rem; border:1px solid transparent; border-radius:2px; transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; cursor:pointer; text-decoration:none; }
  .btn-primary { background:#b5121b; color:#fff; box-shadow:0 0 0 0 rgba(216,27,39,.0); }
  .btn-primary:hover { background:#d81b27; transform:translateY(-2px); box-shadow:0 10px 30px -10px rgba(216,27,39,.7); }
  .btn-ghost { border-color:#efe9dd66; color:#efe9dd; background:transparent; }
  .btn-ghost:hover { border-color:#d81b27; color:#fff; background:#d81b2722; }
  .btn-sm { padding:.6rem 1.1rem; font-size:.82rem; }

  /* enlaces del menú con subrayado animado */
  .nav-link { position:relative; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:.95rem; font-weight:500; color:#efe9dd; padding:.4rem 0; text-decoration:none; opacity:.85; transition:opacity .2s; }
  .nav-link::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:#d81b27; transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.2,1); }
  .nav-link:hover, .nav-link[aria-current="page"] { opacity:1; }
  .nav-link:hover::after, .nav-link[aria-current="page"]::after { transform:scaleX(1); }
  .link-u { color:#efe9dd; text-decoration:underline; text-decoration-color:#d81b27; text-decoration-thickness:1px; transition:text-decoration-thickness .2s, color .2s; }
  .link-u:hover { color:#fff; text-decoration-thickness:3px; }

  #site-header { transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; border-bottom:1px solid transparent; }
  #site-header.scrolled { background:rgba(10,10,11,.86); backdrop-filter:blur(12px); border-color:#2b2b30; }

  /* tarjetas */
  .card { background:#131315; border:1px solid #2b2b30; border-radius:4px; transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .4s ease; }
  .card-hover:hover { transform:translateY(-6px) !important; border-color:#b5121b; box-shadow:0 24px 50px -24px rgba(216,27,39,.45); }

  /* motivos artísticos (SVG propios, sustituibles por fotos reales) */
  .art { position:relative; overflow:hidden; aspect-ratio:4/5; background:#131315; isolation:isolate; }
  .art svg { position:absolute; inset:0; width:100%; height:100%; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
  .art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
  .card-hover:hover .art svg, .art-zoom:hover svg, .art-zoom:hover img { transform:scale(1.07); }
  .art-jp { background:radial-gradient(120% 90% at 50% 0%, #4a0d12 0%, #16090b 55%, #0a0a0b 100%); color:#ffffff30; --sun:#b5121b; }
  .art-fl { background:linear-gradient(160deg,#17171a,#0d0d0f); color:#efe9ddcc; }
  .art-tr { background:linear-gradient(160deg,#e9dcbc,#d9c9a0); color:#111; --heart:#b5121b; --gold:#d19a1a; }
  .art.r1 svg { transform:scale(1.12) rotate(-4deg); } .art.r2 svg { transform:scale(1.25) translate(6%,4%); } .art.r3 svg { transform:scale(1.15) rotate(5deg) translate(-4%,0); } .art.r4 svg { transform:scale(1.4) translate(-8%,-6%); }
  .art.r1:hover svg,.art.r2:hover svg,.art.r3:hover svg,.art.r4:hover svg { transform:scale(1.3); }
  .art-tag { color:#efe9dd; position:absolute; z-index:3; left:.75rem; top:.75rem; background:#0a0a0bcc; backdrop-filter:blur(4px); font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; padding:.3rem .6rem; border:1px solid #efe9dd33; }

  /* entradas al hacer scroll (solo se ocultan si hay JS) */
  .js .reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
  .js .reveal.in { opacity:1; transform:none; transition:opacity .8s ease, transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .4s ease; }


  /* cinta de estilos */
  .marquee { display:flex; width:max-content; animation:marquee 38s linear infinite; }
  @keyframes marquee { to { transform:translateX(-50%); } }

  /* hero */
  .hero-bg { background:
      radial-gradient(60% 50% at 78% 30%, rgba(181,18,27,.34), transparent 70%),
      radial-gradient(50% 60% at 10% 90%, rgba(181,18,27,.14), transparent 70%),
      #0a0a0b; }
  .wordmark { font-family:"Bodoni Moda",Georgia,serif; font-weight:700; letter-spacing:.06em; line-height:.9; font-size:clamp(3.6rem,13vw,10.5rem); color:#efe9dd; text-decoration:none; display:inline-block; transition:color .3s; }
  .wordmark span { color:#d81b27; font-style:italic; font-weight:500; }
  .wordmark:hover { color:#fff; }

  /* preguntas frecuentes */
  details.faq { border-bottom:1px solid #2b2b30; }
  details.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:1.5rem; align-items:center; padding:1.35rem 0; font-family:"Barlow Condensed",sans-serif; font-size:1.45rem; font-weight:600; letter-spacing:.02em; }
  details.faq summary::-webkit-details-marker { display:none; }
  details.faq summary .pm { flex:none; width:1.9rem; height:1.9rem; border:1px solid #efe9dd44; border-radius:99px; position:relative; transition:background .3s, transform .3s; }
  details.faq summary .pm::before, details.faq summary .pm::after { content:""; position:absolute; left:50%; top:50%; width:.8rem; height:1px; background:#efe9dd; transform:translate(-50%,-50%); }
  details.faq summary .pm::after { transform:translate(-50%,-50%) rotate(90deg); transition:transform .3s; }
  details.faq[open] summary .pm { background:#b5121b; border-color:#b5121b; }
  details.faq[open] summary .pm::after { transform:translate(-50%,-50%) rotate(0); }
  details.faq .ans { color:#a19c92; line-height:1.75; padding:0 3rem 1.6rem 0; max-width:72ch; }

  /* formularios */
  .field label { display:block; font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:.8rem; color:#a19c92; margin-bottom:.4rem; }
  .field input, .field select, .field textarea { width:100%; background:#0a0a0b; border:1px solid #2b2b30; color:#efe9dd; padding:.85rem 1rem; border-radius:2px; font:inherit; transition:border-color .2s, box-shadow .2s; }
  .field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:#d81b27; box-shadow:0 0 0 3px rgba(216,27,39,.2); }
  .field input::placeholder, .field textarea::placeholder { color:#6f6b64; }
  .field select { appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23a19c92' stroke-width='1.5'><path d='M1 1l5 5 5-5'/></svg>"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; }
  .field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color:#d81b27; }

  .chip { font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:.9rem; padding:.55rem 1.1rem; border:1px solid #2b2b30; border-radius:99px; color:#a19c92; background:transparent; cursor:pointer; transition:all .25s; }
  .chip:hover { color:#fff; border-color:#efe9dd66; }
  .chip[aria-pressed="true"] { background:#b5121b; border-color:#b5121b; color:#fff; }

  .prose-oi h2 { font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; font-weight:700; font-size:2rem; letter-spacing:.02em; margin:2.6rem 0 .9rem; line-height:1; }
  .prose-oi h3 { font-family:"Barlow Condensed",sans-serif; font-size:1.35rem; font-weight:600; margin:1.6rem 0 .5rem; color:#efe9dd; }
  .prose-oi p { color:#c9c4ba; line-height:1.85; margin:0 0 1.1rem; }
  .prose-oi ul, .prose-oi ol { color:#c9c4ba; line-height:1.85; padding-left:1.25rem; margin:0 0 1.2rem; }
  .prose-oi li { margin-bottom:.4rem; }
  .prose-oi ul { list-style:square; } .prose-oi li::marker { color:#d81b27; }
  .prose-oi strong { color:#efe9dd; }

  .map-box { background:
     linear-gradient(#ffffff0d 1px,transparent 1px) 0 0/44px 44px,
     linear-gradient(90deg,#ffffff0d 1px,transparent 1px) 0 0/44px 44px,
     radial-gradient(70% 70% at 50% 50%, #1e1e22, #101012); }

  @media (prefers-reduced-motion: reduce) { .marquee { animation:none; } }