/*
Theme Name: Gabriela De Jesus
Theme URI: https://lavenderblush-salmon-919232.hostingersite.com/
Author: Gabriela De Jesus Studio
Description: Tema personalizado para el portafolio y tienda de Gabriela De Jesus, artista visual.
Version: 1.5
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: gabriela-theme
*/

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:        #f4efe6;
  --bg-2:      #e9ded0;
  --paper:     #fffdfa;
  --ink:       #18140f;
  --ink-soft:  #2a251d;
  --ink-mute:  #6d6459;
  --accent:    #18140f;
  --accent-2:  #4a5d3a;
  --whatsapp:  #25D366;
  --whatsapp-dark: #1da851;
  --line:      rgba(24,20,15,.14);
  --line-soft: rgba(24,20,15,.08);
  --serif: "Fraunces", "EB Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 78px;

  /* Paleta de óleo (Sinclair · Dalí): índigo, sangre de toro, bermellón, ocre, hueso */
  --oxblood:   #8E2A1C;
  --vermilion: #C4502A;
  --ochre:     #C9962F;
  --indigo:    #2C3E5C;
  --slate:     #5B7A99;
  --umber:     #4A3626;
  --bone:      #EFE6D6;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg); color: var(--ink-soft); font-family: var(--sans);
  font-size: 16px; line-height: 1.65; margin: 0;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--serif); line-height: 1.1; letter-spacing: -0.01em;
  font-weight: 600; color: var(--ink); text-wrap: balance;
}
em { font-style: italic; color: var(--accent-2); }
::selection { background: var(--ink); color: var(--bg); }

.container, .wp-container { max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 960px) { .container, .wp-container { padding-inline: 2rem; } }

.skip-link { position: fixed; top: -100px; left: 1rem; padding: .6rem 1rem; background: var(--ink); color: var(--bg); z-index: 9999; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 1rem; }

.eyebrow { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mute); font-weight: 600; margin-bottom: .9rem; display: block; }
.center { text-align: center; }
.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
/* .section can carry a full-bleed background (e.g. section-alt); the actual
   content sits in a nested .container (see .container rule above) so text/columns
   don't run edge-to-edge. */

/* =============================================================
   2. Nav (site chrome, hardcoded in header.php)
   ============================================================= */
.nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; background: rgba(244,239,230,.86); backdrop-filter: blur(10px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease-out); }
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand, .brand img, .footer-brand, .footer-brand img {
  background: none !important; box-shadow: none !important; border: none !important; outline: none !important;
}
.brand img { height: 34px; width: auto; display: block; }
.nav-links { display: none; align-items: center; gap: 1.75rem; }
.nav-links a { font-size: .92rem; font-weight: 500; position: relative; padding-block: .3rem; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--accent-2); transition: right .35s var(--ease-out); }
.nav-links a:hover::after, .nav-links a.current::after { right: 0; }
.nav-cta { display: none; }
@media (min-width: 960px) { .nav-links { display: flex; } .nav-cta { display: inline-flex; } }
.nav-burger { display: flex; flex-direction: column; gap: 5px; width: 34px; height: 34px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
.nav-burger span { width: 20px; height: 1.6px; background: var(--ink); transition: transform .3s var(--ease-out), opacity .3s var(--ease-out); }
@media (min-width: 960px) { .nav-burger { display: none; } }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
.nav-mobile { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99; background: var(--bg); padding: 2rem 1.25rem; display: flex; flex-direction: column; gap: 1.4rem; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform .3s var(--ease-out), opacity .3s var(--ease-out); }
.nav-mobile.is-open { transform: none; opacity: 1; pointer-events: auto; }
.nav-mobile a { font-family: var(--serif); font-size: 1.6rem; }
@media (min-width: 960px) { .nav-mobile { display: none; } }

.float-stack { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.float-btn, .wa-float { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px rgba(24,20,15,.22); transition: transform .35s var(--ease-out); }
.float-btn:hover, .wa-float:hover { transform: scale(1.08); }
.float-btn svg, .wa-float svg { width: 24px; height: 24px; fill: #fff; }
.wa-float { background: var(--whatsapp); box-shadow: 0 12px 28px rgba(37,211,102,.4); }
.float-ig { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.float-substack { background: #FF6719; }

.footer { border-top: 1px solid var(--line); padding-block: 2.6rem; background: var(--bg-2); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; }
.footer-brand img { height: 26px; display: block; }
.footer-social { display: flex; gap: 1.2rem; font-size: .9rem; font-weight: 600; }
.footer-social a:hover { color: var(--accent-2); }
.footer-bottom { margin-top: 1.6rem; font-size: .8rem; color: var(--ink-mute); text-align: center; }

/* =============================================================
   3. Page header (interior pages)
   ============================================================= */
.page-header { padding-block: clamp(3rem, 6vw, 5rem) 2rem; text-align: center; }

/* =============================================================
   4. Gutenberg block skinning
   ============================================================= */
.wp-site-blocks, .entry-content { margin: 0; }

/* Buttons */
.wp-block-button__link, .wp-element-button {
  border-radius: 999px !important; padding: .85rem 1.5rem !important; font-weight: 600; font-size: .95rem;
  transition: transform .35s var(--ease-out), background .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.wp-block-button.btn-primary .wp-block-button__link { background: var(--ink); color: var(--bg); }
.wp-block-button.btn-primary .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(24,20,15,.22); }
.wp-block-button.btn-ghost .wp-block-button__link { background: transparent; border: 1.5px solid var(--line); color: var(--ink); }
.wp-block-button.btn-whatsapp .wp-block-button__link { background: var(--whatsapp); color: #fff; }
.wp-block-button.btn-whatsapp .wp-block-button__link:hover { background: var(--whatsapp-dark); }
.wp-block-buttons.is-content-justification-center { justify-content: center; }

/* Hero (Cover block) */
.wp-block-cover.hero-cover { min-height: 92svh !important; }
.wp-block-cover.hero-cover .wp-block-cover__background { background: linear-gradient(0deg, rgba(24,20,15,.72) 0%, rgba(24,20,15,.25) 45%, rgba(24,20,15,.15) 100%) !important; opacity: 1 !important; }
.wp-block-cover.hero-cover .wp-block-cover__inner-container { max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; text-align: left; }
.hero-eyebrow { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--bg-2); }
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); display: inline-block; }
.wp-block-cover.hero-cover h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); max-width: 16ch; color: #fff !important; }
.wp-block-cover.hero-cover h1 em { color: var(--bg-2); }
.wp-block-cover.hero-cover p.hero-sub { font-size: clamp(1rem, 1.6vw, 1.25rem); max-width: 46ch; color: var(--bg-2) !important; }
.wp-block-cover.hero-cover .wp-block-button.btn-ghost .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.4); }

/* Media & text -> concept sections */
.wp-block-media-text.concept-block { align-items: center; gap: 3rem; }
.wp-block-media-text.concept-block .wp-block-media-text__media img { border-radius: 18px; object-fit: cover; aspect-ratio: 4/5; width: 100%; }
.wp-block-media-text.concept-block .wp-block-media-text__content { padding: 0 1rem; }

/* Exposiciones gallery — force all 3 photos to the same crop ratio */
.expo-gallery .wp-block-image { margin: 0; }
.expo-gallery .wp-block-image img {
  aspect-ratio: 4 / 5; width: 100%; height: 100%; object-fit: cover; border-radius: 14px;
}

/* Pillars (Columns block) */
.pillars-cols { margin-top: 2.2rem !important; gap: 1.4rem !important; }
.pillar-num { font-family: var(--serif); font-style: italic; color: var(--accent-2); font-size: 1.4rem; display: block; }
/* Nested inside a Media & Text column, 3-across gets too cramped — stack instead */
.wp-block-media-text .pillars-cols { flex-direction: column; }
.wp-block-media-text .pillars-cols > .wp-block-column {
  flex-basis: 100% !important; width: 100% !important; margin-bottom: 1.2rem;
}
.wp-block-media-text .pillars-cols > .wp-block-column:last-child { margin-bottom: 0; }

/* Marquee ticker */
.marquee-line { border-block: 1px solid var(--line); background: var(--bg-2); padding-block: 1.1rem !important; overflow: hidden; }
.marquee-line .marquee-track {
  display: flex; gap: 2.5rem; white-space: nowrap; width: max-content;
  animation: gdj-marquee 90s linear infinite;
}
.marquee-line .marquee-track span {
  font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ink-mute);
  display: flex; align-items: center; gap: 2.5rem;
}
.marquee-line .marquee-track span::after { content: "·"; color: var(--accent-2); }
@keyframes gdj-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-line .marquee-track { animation: none; }
}

/* Art card (Group block wrapping Image+Heading+Paragraph+Buttons) */
.card-grid-cols { gap: 1.4rem !important; }
/* Una obra sola en la última fila: mismo ancho que las demás, centrada */
@media (min-width: 782px) {
  .card-grid-cols > .wp-block-column:only-child { flex: 0 0 calc((100% - 2.8rem) / 3) !important; max-width: calc((100% - 2.8rem) / 3); margin-inline: auto; }
}
.art-card { border-radius: 16px; overflow: hidden; background: var(--paper); border: 1px solid var(--line-soft); padding: 0 !important; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.art-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(24,20,15,.16); }
.art-card .wp-block-image { margin: 0; aspect-ratio: 4/5; overflow: hidden; }
.art-card .wp-block-image img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.art-card .art-card-body { padding: 1rem 1.1rem 1.2rem; }
.art-card .art-card-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); }
.art-card h3 { font-size: 1.05rem; margin: .25rem 0 0; }
.art-card .tecnica, .art-card .price { font-size: .82rem; color: var(--ink-mute); margin: .2rem 0 0; }
.art-card .price { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--ink); }
.art-card .wp-block-buttons { margin-top: .8rem !important; }

/* WooCommerce product grid */
.woo-shop ul.products, .woo-shop ul.products.columns-3, .woo-shop ul.products.columns-4 {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 1.4rem !important; list-style: none !important; margin: 2rem 0 !important; padding: 0 !important;
  width: 100% !important;
}
.woo-shop ul.products li.product, .woo-shop ul.products.columns-3 li.product, .woo-shop ul.products.columns-4 li.product {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 16px;
  overflow: hidden; padding: 0 !important; margin: 0 !important;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  text-align: left !important;
  width: 100% !important; float: none !important; clear: none !important;
  display: flex !important; flex-direction: column;
}
.woo-shop ul.products li.product:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(24,20,15,.16); }
.woo-shop ul.products li.product a { text-decoration: none; }
.woo-shop ul.products li.product img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 0 !important; margin: 0 !important;
}
.woo-shop ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--ink);
  padding: 1rem 1.1rem 0; margin: 0;
}
.woo-shop ul.products li.product .price {
  display: block; padding: .3rem 1.1rem 0; font-family: var(--serif); font-style: italic;
  font-size: 1.15rem; color: var(--ink);
}
.woo-shop ul.products li.product .button {
  display: block; margin: 1rem 1.1rem 1.2rem 1.1rem; margin-top: auto; text-align: center;
  background: var(--ink); color: var(--bg) !important; border-radius: 999px;
  padding: .75rem 1.2rem; font-weight: 600; font-size: .9rem; transition: transform .35s var(--ease-out);
}
.woo-shop ul.products li.product .button:hover { transform: translateY(-2px); }
.woo-shop .woocommerce-pagination { margin-top: 2rem; text-align: center; }
.woo-shop .woocommerce-pagination ul { display: inline-flex; gap: .5rem; list-style: none; padding: 0; }
.woo-shop .woocommerce-pagination a, .woo-shop .woocommerce-pagination span {
  display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line);
}
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--accent-2) !important; background: var(--paper) !important;
}

/* Single product / cart / checkout / my-account pages (WooCommerce's own templates) */
.woocommerce:not(body) {
  max-width: 1180px; margin-inline: auto; padding: clamp(2rem, 5vw, 4rem) 1.25rem;
}
.woocommerce div.product .woocommerce-product-gallery img { border-radius: 16px; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
  font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 1.5rem;
}
.woocommerce .button, .woocommerce button.button, .woocommerce a.button,
.woocommerce #respond input#submit, .woocommerce input.button {
  background: var(--ink) !important; color: var(--bg) !important; border-radius: 999px !important;
  padding: .85rem 1.5rem !important; font-weight: 600 !important; border: none !important;
  transition: transform .35s var(--ease-out) !important;
}
.woocommerce .button:hover { transform: translateY(-2px); }
.woocommerce table.shop_table { border-color: var(--line); }
.woocommerce table.shop_table th { font-family: var(--serif); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea {
  border-radius: 10px; border: 1.5px solid var(--line); padding: .7rem .9rem;
}
.woocommerce-checkout #payment { background: var(--bg-2); border-radius: 14px; }

/* Substack RSS feed (core/rss block) */
ul.wp-block-rss.substack-feed {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem;
}
ul.wp-block-rss.substack-feed li {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: 16px;
  padding: 1.3rem 1.4rem; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
ul.wp-block-rss.substack-feed li:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(24,20,15,.14); }
.wp-block-rss__item-title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; display: block; margin-bottom: .4rem; }
.wp-block-rss__item-title a { color: var(--ink); }
.wp-block-rss__item-title a:hover { color: var(--accent-2); }
.wp-block-rss__item-publish-date, cite.wp-block-rss__item-author {
  font-size: .78rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em;
}
.wp-block-rss__item-excerpt { display: block; margin-top: .6rem; font-size: .92rem; color: var(--ink-mute); }
/* Si el feed de Substack está vacío, WordPress muestra un aviso de error; se oculta y queda la nota amable */
.components-placeholder:has(.notice-error) { display: none; }
.substack-empty-note { margin-top: 1.5rem !important; font-size: .85rem; color: var(--ink-mute); font-style: italic; }
ul.wp-block-rss.substack-feed:empty { display: none; }
ul.wp-block-rss.substack-feed:empty + .substack-empty-note { display: block; }
ul.wp-block-rss.substack-feed:not(:empty) + .substack-empty-note { display: none; }

/* Writing card */
.writing-card { border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.6rem, 4vw, 3rem) !important; background: var(--paper); text-align: center; }

/* Contact quick-action buttons */
.contact-btn-row { margin-top: 1rem !important; flex-wrap: wrap; }
.wp-block-button.btn-email .wp-block-button__link {
  background: #2563eb; color: #fff; font-weight: 700;
}
.wp-block-button.btn-email .wp-block-button__link:hover { background: #1d4ed8; }
.wp-block-button.btn-substack .wp-block-button__link {
  background: #FF6719; color: #fff;
}
.wp-block-button.btn-substack .wp-block-button__link:hover { background: #e2570f; }

/* Collaboration form (Contact Form 7) */
.collab-section .wpcf7-form { margin-top: 1.4rem; }
.collab-section .gdj-field { margin-bottom: 1rem; }
.collab-section .wpcf7-form-control {
  width: 100%; padding: .8rem 1rem; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--paper); font: inherit; color: var(--ink);
}
.collab-section textarea.wpcf7-form-control { min-height: 130px; resize: vertical; }
.collab-section .wpcf7-form-control:focus { border-color: var(--accent-2); outline: none; }
.collab-section .gdj-submit { margin-top: .4rem; }
.collab-section .wpcf7-form-control.wpcf7-submit {
  width: auto; background: var(--ink); color: var(--bg); border: none; border-radius: 999px;
  padding: .85rem 1.8rem; font-weight: 600; cursor: pointer; transition: transform .35s var(--ease-out);
}
.collab-section .wpcf7-form-control.wpcf7-submit:hover { transform: translateY(-2px); }
.collab-section .wpcf7-spinner { margin-left: .6rem; }
.collab-section .wpcf7-not-valid-tip { color: #b3261e; font-size: .8rem; margin-top: .3rem; display: block; }
.collab-section .wpcf7-response-output {
  margin-top: 1rem !important; border-radius: 10px; border: 1.5px solid var(--accent-2) !important;
  padding: .8rem 1rem; font-size: .9rem;
}

/* Contact */
.social-list a { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; }
.social-list a:hover { color: var(--accent-2); }

/* Alt background section */
.section-alt { background: var(--bg-2); }

@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link { transition: none; }
}

/* =============================================================
   5. Capa de óleo (v1.2)
   Dirección de arte: pintura al óleo de galería.
   - Sinclair: índigo, sangre de toro, hojas rojas que caen,
     palomas blancas, ramas de olivo, pintura escurrida.
   - Dalí: cielo profundo, desierto ocre, sombras largas.
   - Flash de tatuaje tradicional: listones y estrellas.
   ============================================================= */
@keyframes gdj-draw { to { stroke-dashoffset: 0; } }
@keyframes gdj-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes gdj-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gdj-leaf-in { from { opacity: 0; transform: scale(.2); } to { opacity: .92; transform: none; } }
@keyframes gdj-fly { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-6px, -10px) rotate(-3deg); } }
@keyframes gdj-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.72) rotate(18deg); } }
@keyframes gdj-fall {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg) scale(var(--s)); opacity: 0; }
  8%   { opacity: .95; }
  50%  { transform: translate3d(-70px, 46vh, 0) rotate(160deg) scale(var(--s)); }
  92%  { opacity: .9; }
  100% { transform: translate3d(-150px, 100vh, 0) rotate(340deg) scale(var(--s)); opacity: 0; }
}
@keyframes gdj-splash {
  0%   { transform: translate(var(--x), var(--y)) translate(-50%, -50%) rotate(var(--a)) scale(.2); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy) + 16px)) translate(-50%, -50%) rotate(var(--a)) scale(var(--s)); opacity: 0; }
}

/* Lienzo: grano de óleo + trama de tela en el fondo de la página */
body {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .21 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% -10%, rgba(201,150,47,.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(74,54,38,.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(74,54,38,.025) 0 1px, transparent 1px 3px);
}
/* (el grano va en el fondo del cuerpo para no ensuciar las fotos) */
::selection { background: var(--oxblood); color: var(--bone); }
em { color: var(--oxblood); }
h1 em, h2 em, h3 em { color: var(--oxblood); }
h1, h2, h3 { color: var(--ink); }

/* ---------- Navegación ---------- */
.nav::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--oxblood), var(--vermilion), var(--ochre));
  transform-origin: left; transform: scaleX(var(--p, 0));
}
.brand img { transition: transform .6s var(--ease-out); }
.brand:hover img { transform: rotate(-4deg); }
.nav-links a { transition: color .3s var(--ease-out); }
.nav-links a::after { height: 2px; background: var(--oxblood); }
.nav-links a:hover, .nav-links a.current { color: var(--oxblood); }

/* ---------- Botones ---------- */
.wp-block-button__link, .wp-element-button,
.woo-shop ul.products li.product .button {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 4px !important; letter-spacing: .04em;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .35s, color .35s, border-color .35s !important;
}
.wp-block-button__link::before, .woo-shop ul.products li.product .button::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
}
.wp-block-button__link:hover, .woo-shop ul.products li.product .button:hover {
  transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 2px));
}
.wp-block-button__link:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(.97); }
.wp-block-button__link:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }

/* Principal: tinta; al pasar, una pincelada de sangre de toro la cubre */
.wp-block-button.btn-primary .wp-block-button__link,
.woo-shop ul.products li.product .button {
  background-color: var(--ink) !important; color: var(--bone) !important;
}
.wp-block-button.btn-primary .wp-block-button__link::before,
.woo-shop ul.products li.product .button::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08 .9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(100deg, var(--oxblood), var(--vermilion));
  clip-path: polygon(0 0, 0 0, -12% 100%, -12% 100%);
  transition: clip-path .7s var(--ease-out);
}
.wp-block-button.btn-primary .wp-block-button__link:hover::before,
.woo-shop ul.products li.product .button:hover::before { clip-path: polygon(0 0, 112% 0, 100% 100%, -12% 100%); }
.wp-block-button.btn-primary .wp-block-button__link:hover,
.woo-shop ul.products li.product .button:hover { box-shadow: 0 14px 28px -14px rgba(142,42,28,.8); }

/* Secundario (portada): contorno hueso que se rellena */
.wp-block-button.btn-ghost .wp-block-button__link {
  background: rgba(21,17,13,.25) !important; color: var(--bone) !important;
  border: 1.5px solid rgba(239,230,214,.75) !important;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.wp-block-button.btn-ghost .wp-block-button__link::before {
  background: var(--bone); transform: scaleY(0); transform-origin: bottom;
  transition: transform .55s var(--ease-out);
}
.wp-block-button.btn-ghost .wp-block-button__link:hover { color: var(--ink) !important; border-color: var(--bone) !important; }
.wp-block-button.btn-ghost .wp-block-button__link:hover::before { transform: scaleY(1); }

/* Secundario fuera de la portada (sobre lienzo claro): contorno de tinta */
.wp-block-button.btn-ghost:not(.hero-cover .btn-ghost) .wp-block-button__link {
  background: transparent !important; color: var(--ink) !important; border-color: var(--ink) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.wp-block-button.btn-ghost:not(.hero-cover .btn-ghost) .wp-block-button__link::before { background: var(--ink); }
.wp-block-button.btn-ghost:not(.hero-cover .btn-ghost) .wp-block-button__link:hover { color: var(--bone) !important; }

/* WhatsApp / correo / Substack: destello sobrio */
.wp-block-button.btn-whatsapp .wp-block-button__link { background: #1f8f53 !important; color: #fff; }
.wp-block-button.btn-whatsapp .wp-block-button__link:hover { background: #17733f !important; box-shadow: 0 12px 24px -12px rgba(23,115,63,.8); }
.wp-block-button.btn-whatsapp .wp-block-button__link::before,
.wp-block-button.btn-email .wp-block-button__link::before,
.wp-block-button.btn-substack .wp-block-button__link::before {
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .8s var(--ease-out);
}
.wp-block-button.btn-whatsapp .wp-block-button__link:hover::before,
.wp-block-button.btn-email .wp-block-button__link:hover::before,
.wp-block-button.btn-substack .wp-block-button__link:hover::before { transform: translateX(120%); }

/* Botones de WooCommerce y del formulario */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button,
.woocommerce #respond input#submit, .woocommerce input.button,
.collab-section .wpcf7-form-control.wpcf7-submit {
  border-radius: 4px !important;
  background-image: linear-gradient(100deg, var(--ink) 0 50%, var(--oxblood) 50%, var(--vermilion)) !important;
  background-size: 205% 100% !important; background-position: 0 0 !important;
  transition: background-position .6s var(--ease-out), transform .45s var(--ease-out), box-shadow .45s !important;
}
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover,
.collab-section .wpcf7-form-control.wpcf7-submit:hover {
  background-position: 100% 0 !important; transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(142,42,28,.8);
}

/* Salpicadura de óleo al hacer clic */
.gdj-splash {
  position: fixed; left: 0; top: 0; width: 7px; height: 11px; z-index: 9999; pointer-events: none;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  animation: gdj-splash .85s cubic-bezier(.2,.7,.3,1) forwards;
}

/* Botones flotantes: sobrios, con un gesto al pasar */
.float-btn, .wa-float { transition: transform .45s var(--ease-out), box-shadow .35s; }
.float-btn:hover, .wa-float:hover { transform: translateY(-3px) rotate(-6deg); }

/* ---------- Portada ---------- */
.wp-block-cover.hero-cover .wp-block-cover__image-background { filter: none; }
.wp-block-cover.hero-cover .wp-block-cover__background {
  background:
    linear-gradient(0deg, rgba(21,17,13,.82) 0%, rgba(21,17,13,.35) 38%, rgba(21,17,13,0) 65%) !important;
}
.gdj-hero-art, .gdj-falling { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.gdj-hero-art svg { width: 100%; height: 100%; display: block; }
.gdj-fall { position: absolute; top: 0; width: 26px; height: 64px; animation: gdj-fall linear infinite; will-change: transform; }
.gdj-fall svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.wp-block-cover.hero-cover .wp-block-cover__inner-container { position: relative; z-index: 3; }
.wp-block-cover.hero-cover .wp-block-cover__inner-container > * { animation: gdj-rise 1.1s var(--ease-out) backwards; }
.wp-block-cover.hero-cover .wp-block-cover__inner-container > :nth-child(2) { animation-delay: .15s; }
.wp-block-cover.hero-cover .wp-block-cover__inner-container > :nth-child(3) { animation-delay: .3s; }
.wp-block-cover.hero-cover .wp-block-cover__inner-container > :nth-child(4) { animation-delay: .45s; }
.wp-block-cover.hero-cover h1 { color: var(--bone) !important; text-shadow: 0 4px 30px rgba(0,0,0,.45); }
.wp-block-cover.hero-cover h1 em { position: relative; display: inline-block; color: #E58A55; }
.wp-block-cover.hero-cover h1 em::after {
  content: ""; position: absolute; left: -3%; right: -2%; bottom: -.1em; height: .22em; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04 .6' numOctaves='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='9'/%3E%3C/filter%3E%3Cpath d='M6 14C70 6 160 5 294 9C250 15 150 18 10 20Z' fill='%238E2A1C' filter='url(%23r)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: gdj-wipe 1.4s .9s var(--ease-out) backwards;
}
.hero-eyebrow { color: var(--bone) !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem !important; text-shadow: 0 1px 12px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.6); }
.hero-eyebrow .dot { width: 9px; height: 9px; background: var(--vermilion); box-shadow: 0 0 0 3px rgba(196,80,42,.3); }
.wp-block-cover.hero-cover p.hero-sub { color: #e9e0cf !important; font-family: var(--serif); font-style: italic; }

/* Arte vectorial compartido */
.gdj-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: gdj-draw 2.8s var(--ease-out) forwards; }
.gdj-leaf-in { transform-box: fill-box; transform-origin: bottom center; animation: gdj-leaf-in .9s var(--ease-out) backwards; opacity: .92; }
.gdj-fly { transform-box: fill-box; transform-origin: center; animation: gdj-fly 7s ease-in-out infinite; }
.gdj-twinkle { transform-box: fill-box; transform-origin: center; animation: gdj-twinkle 4s ease-in-out infinite; }

/* ---------- Encabezados interiores: paisaje a lo Dalí ---------- */
.page-header {
  position: relative; overflow: hidden; isolation: isolate;
  padding-bottom: clamp(6rem, 11vw, 9rem) !important;
  background: linear-gradient(180deg, #172539 0%, #26405c 38%, #4f7f93 60%, #a9c0bc 69.5%, #d8b77a 70%, #c08a3e 82%, #7a4f26 100%);
  color: var(--bone);
}
.page-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 22px; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V12C90 4 170 18 270 11S430 3 530 12S710 21 810 9S990 3 1090 13S1170 17 1200 9V24Z' fill='%23f4efe6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.gdj-header-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.gdj-header-art svg { width: 100%; height: 100%; display: block; }
.page-header h1 { color: var(--bone) !important; font-size: clamp(2.2rem, 5.2vw, 3.9rem); text-shadow: 0 4px 24px rgba(0,0,0,.35); }
.page-header .eyebrow { --c: var(--bone); }
.page-header p:not(.eyebrow) { color: #e3dccd; }

/* ---------- Listón de tatuaje para las etiquetas ---------- */
.eyebrow {
  display: table; position: relative; margin-bottom: 1.1rem;
  padding: .32rem 1.05rem; font-size: .72rem; letter-spacing: .16em;
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: 2px;
  box-shadow: 3px 3px 0 var(--c, var(--oxblood));
}
.eyebrow.center { margin-inline: auto; }
.eyebrow::before, .eyebrow::after {
  content: ""; position: absolute; top: 7px; width: 16px; height: 100%; z-index: -1;
  background: var(--c, var(--oxblood)); border: 2px solid var(--ink);
}
.eyebrow::before { left: -12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 45% 50%); }
.eyebrow::after { right: -12px; clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%); }
.page-header .eyebrow { color: var(--ink); }

/* Pincelada bajo los títulos */
main h2.wp-block-heading::after, .page-header h1::after {
  content: ""; display: block; width: 130px; height: 14px; margin-top: .75rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 16'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .7' numOctaves='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3Cpath d='M4 9C40 4 90 3 126 6C100 11 50 13 6 13Z' fill='%238E2A1C' filter='url(%23r)'/%3E%3C/svg%3E") left center / contain no-repeat;
}
.page-header h1::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 16'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .7' numOctaves='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3Cpath d='M4 9C40 4 90 3 126 6C100 11 50 13 6 13Z' fill='%23C9962F' filter='url(%23r)'/%3E%3C/svg%3E");
}
main h2.wp-block-heading.center::after, main h2.has-text-align-center::after,
.writing-card h2.wp-block-heading::after, .page-header h1::after { margin-inline: auto; }
.gdj-reveal::after { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s .35s var(--ease-out); }
.gdj-reveal.is-in::after { clip-path: inset(0 0 0 0); }

/* ---------- Bloque "concepto": lienzo angular detrás de la foto ---------- */
.wp-block-media-text.concept-block .wp-block-media-text__media { position: relative; }
.wp-block-media-text.concept-block .wp-block-media-text__media::before {
  content: ""; position: absolute; inset: 5% -4% -4% 5%; z-index: 0;
  clip-path: polygon(4% 0, 100% 3%, 97% 100%, 0 95%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .25' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, var(--indigo), #1c2433 70%);
  transition: transform .9s var(--ease-out);
}
.wp-block-media-text.concept-block .wp-block-media-text__media img { z-index: 1; border-radius: 3px !important; transition: transform .9s var(--ease-out); }
.wp-block-media-text.concept-block:not(.is-image-fill-element) .wp-block-media-text__media img { position: relative; }
.wp-block-media-text.concept-block:hover .wp-block-media-text__media::before { transform: translate(8px, 6px); }
.section-alt .wp-block-media-text.concept-block .wp-block-media-text__media::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .25' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, var(--vermilion), var(--oxblood) 70%);
}
@media (max-width: 781px) {
  .wp-block-media-text.concept-block .wp-block-media-text__media::before { inset: 4% -2% -2% 4%; }
}

/* ---------- Pilares 01 · 02 · 03 ---------- */
.pillars-cols > .wp-block-column {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 1.1rem 1.3rem 1.2rem; border-radius: 3px;
  background: var(--paper); border: 1px solid var(--line);
  border-left: 4px solid var(--c, var(--oxblood));
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.pillars-cols > .wp-block-column:hover { transform: translateX(4px); box-shadow: 0 16px 30px -20px rgba(21,17,13,.6); }
.pillars-cols h3 { margin: .2rem 0 .3rem; }
.pillars-cols p:not(.pillar-num) { margin: 0; }
.pillar-num {
  color: var(--c, var(--oxblood)); font-size: 2.3rem; font-weight: 500; line-height: 1; margin: 0;
  display: inline-block;
}
.gdj-pillar-mark {
  position: absolute; right: 14px; top: 12px; width: 26px; height: 26px; color: var(--ochre);
  transition: transform .6s var(--ease-out);
}
.gdj-pillar-mark svg { width: 100%; height: 100%; display: block; }
.pillars-cols > .wp-block-column:hover .gdj-pillar-mark { transform: rotate(45deg) scale(1.15); }

/* ---------- Cinta de técnicas: banda índigo, estrellas de tatuaje ---------- */
.marquee-line {
  position: relative; z-index: 2; border: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .2' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(90deg, #141c2a, var(--indigo) 50%, #141c2a);
  transform: rotate(-1deg) scale(1.03); margin-block: 1.6rem !important;
  box-shadow: 0 18px 40px -24px rgba(21,17,13,.9);
}
.marquee-line .marquee-track span { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 500; color: var(--bone); }
.marquee-line .marquee-track span:nth-child(3n+2) { color: #E58A55; }
.marquee-line .marquee-track span::after {
  content: ""; width: 22px; height: 22px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-18 -18 36 36'%3E%3Cpath d='M0 -16C2 -5 5 -2 16 0C5 2 2 5 0 16C-2 5 -5 2 -16 0C-5 -2 -2 -5 0 -16Z' fill='%23C9962F' stroke='%2315110d' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.marquee-line:hover .marquee-track { animation-play-state: paused; }

/* ---------- Tarjetas de obra y productos: como cuadros colgados ---------- */
.art-card, .woo-shop ul.products li.product {
  position: relative; border: 0; border-radius: 3px !important;
  box-shadow: 0 1px 0 var(--line-soft), 0 10px 24px -18px rgba(21,17,13,.55);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.art-card:hover, .woo-shop ul.products li.product:hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
  box-shadow: 0 30px 50px -26px rgba(21,17,13,.7);
}
.art-card::before, .woo-shop ul.products li.product::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 3;
  background: var(--c, var(--oxblood)); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-out);
}
.art-card:hover::before, .woo-shop ul.products li.product:hover::before { transform: scaleX(1); }
.art-card .wp-block-image img, .woo-shop ul.products li.product img { transition: transform 1.2s var(--ease-out), filter .8s; filter: saturate(.92); }
.art-card:hover .wp-block-image img, .woo-shop ul.products li.product:hover img { transform: scale(1.05); filter: saturate(1.05); }
.art-card .art-card-cat { color: var(--c, var(--oxblood)); font-weight: 700; letter-spacing: .14em; }

/* ---------- Secciones alternas: borde de pincel ---------- */
.section-alt { position: relative; background-color: var(--bg-2); }
.section-alt::before {
  content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 23px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V14C80 4 160 20 260 12S420 2 520 12S700 22 800 10S980 4 1080 14S1160 18 1200 10V24Z' fill='%23e9ded0'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Tarjeta de la tienda: lámina de flash con marco doble */
.writing-card {
  position: relative; isolation: isolate; border-radius: 3px !important;
  border: 2px solid var(--ink) !important;
  box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7.5px var(--ink), 8px 8px 0 var(--indigo);
}
.writing-card::before, .writing-card::after {
  content: ""; position: absolute; width: 34px; height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-18 -18 36 36'%3E%3Cpath d='M0 -16C2 -5 5 -2 16 0C5 2 2 5 0 16C-2 5 -5 2 -16 0C-5 -2 -2 -5 0 -16Z' fill='%23C9962F' stroke='%2315110d' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.writing-card::before { left: 22px; top: 22px; }
.writing-card::after { right: 22px; bottom: 22px; width: 24px; height: 24px; }
.writing-card .wp-block-buttons { justify-content: center; }

/* Substack / exposiciones */
ul.wp-block-rss.substack-feed li { border-radius: 3px; border-top: 3px solid var(--c, var(--oxblood)); }
.expo-gallery .wp-block-image img { border-radius: 3px !important; transition: transform .9s var(--ease-out), box-shadow .5s; }
.expo-gallery .wp-block-image:hover img { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(21,17,13,.7); }

/* Formulario */
.collab-section .wpcf7-form-control { border-radius: 3px; }
.collab-section .wpcf7-form-control:focus { border-color: var(--oxblood); box-shadow: 0 0 0 3px rgba(142,42,28,.12); }

/* ---------- Pie: el lienzo escurre sobre la noche ---------- */
.footer {
  position: relative; background: #141a24; color: var(--bone); border-top: 0;
  margin-top: 0; padding-top: 4.4rem;
}
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 62px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 62'%3E%3Cpath d='M0 0H600V6H590.5C587.5 6 587.5 8 587.5 44A3.5 3.5 0 0 1 580.5 44C580.5 8 580.5 6 577.5 6H553.5C550.5 6 550.5 8 550.5 18A2.5 2.5 0 0 1 545.5 18C545.5 8 545.5 6 542.5 6H510C507 6 507 8 507 36A4 4 0 0 1 499 36C499 8 499 6 496 6H464C461 6 461 8 461 26A3 3 0 0 1 455 26C455 8 455 6 452 6H419.5C416.5 6 416.5 8 416.5 50A4.5 4.5 0 0 1 407.5 50C407.5 8 407.5 6 404.5 6H376C373 6 373 8 373 18A2 2 0 0 1 369 18C369 8 369 6 366 6H329C326 6 326 8 326 40A4 4 0 0 1 318 40C318 8 318 6 315 6H286.5C283.5 6 283.5 8 283.5 22A2.5 2.5 0 0 1 278.5 22C278.5 8 278.5 6 275.5 6H244C241 6 241 8 241 58A5 5 0 0 1 231 58C231 8 231 6 228 6H194.5C191.5 6 191.5 8 191.5 30A3.5 3.5 0 0 1 184.5 30C184.5 8 184.5 6 181.5 6H155C152 6 152 8 152 16A2 2 0 0 1 148 16C148 8 148 6 145 6H111.5C108.5 6 108.5 8 108.5 52A4.5 4.5 0 0 1 99.5 52C99.5 8 99.5 6 96.5 6H66.5C63.5 6 63.5 8 63.5 20A2.5 2.5 0 0 1 58.5 20C58.5 8 58.5 6 55.5 6H28.5C25.5 6 25.5 8 25.5 36A3.5 3.5 0 0 1 18.5 36C18.5 8 18.5 6 15.5 6H0Z' fill='%23f4efe6'/%3E%3C/svg%3E") left top / 600px 62px repeat-x;
}
main:has(> .section-alt:last-child) + .footer::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 62'%3E%3Cpath d='M0 0H600V6H590.5C587.5 6 587.5 8 587.5 44A3.5 3.5 0 0 1 580.5 44C580.5 8 580.5 6 577.5 6H553.5C550.5 6 550.5 8 550.5 18A2.5 2.5 0 0 1 545.5 18C545.5 8 545.5 6 542.5 6H510C507 6 507 8 507 36A4 4 0 0 1 499 36C499 8 499 6 496 6H464C461 6 461 8 461 26A3 3 0 0 1 455 26C455 8 455 6 452 6H419.5C416.5 6 416.5 8 416.5 50A4.5 4.5 0 0 1 407.5 50C407.5 8 407.5 6 404.5 6H376C373 6 373 8 373 18A2 2 0 0 1 369 18C369 8 369 6 366 6H329C326 6 326 8 326 40A4 4 0 0 1 318 40C318 8 318 6 315 6H286.5C283.5 6 283.5 8 283.5 22A2.5 2.5 0 0 1 278.5 22C278.5 8 278.5 6 275.5 6H244C241 6 241 8 241 58A5 5 0 0 1 231 58C231 8 231 6 228 6H194.5C191.5 6 191.5 8 191.5 30A3.5 3.5 0 0 1 184.5 30C184.5 8 184.5 6 181.5 6H155C152 6 152 8 152 16A2 2 0 0 1 148 16C148 8 148 6 145 6H111.5C108.5 6 108.5 8 108.5 52A4.5 4.5 0 0 1 99.5 52C99.5 8 99.5 6 96.5 6H66.5C63.5 6 63.5 8 63.5 20A2.5 2.5 0 0 1 58.5 20C58.5 8 58.5 6 55.5 6H28.5C25.5 6 25.5 8 25.5 36A3.5 3.5 0 0 1 18.5 36C18.5 8 18.5 6 15.5 6H0Z' fill='%23e9ded0'/%3E%3C/svg%3E"); }
.footer-brand img { height: 40px; filter: invert(1) sepia(.2) brightness(1.5); transition: transform .5s var(--ease-out); }
.footer-brand:hover img { transform: rotate(-4deg); }
.footer-social a { position: relative; transition: color .3s; }
.footer-social a:hover { color: var(--ochre); }
.footer-social a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
  background: var(--ochre); transition: right .4s var(--ease-out);
}
.footer-social a:hover::after { right: 0; }
.footer-bottom { color: rgba(239,230,214,.55); }

/* ---------- Aparición al hacer scroll (solo con JavaScript) ---------- */
.gdj-reveal { opacity: 0; }
.gdj-reveal.is-in { opacity: 1; animation: gdj-rise 1s var(--ease-out) var(--d, 0s) backwards; }

/* ---------- Celular ---------- */
@media (max-width: 700px) {
  .gdj-hero-art { opacity: .55; }
  .gdj-hero-art .gdj-branch { display: none; }
  .gdj-fall:nth-child(n+5) { display: none; }
}

/* ---------- Movimiento reducido: solo se apagan los bucles infinitos ---------- */
@media (prefers-reduced-motion: reduce) {
  .gdj-fly, .gdj-twinkle { animation: none; }
  .gdj-falling { display: none; }
}

/* =============================================================
   6. Encabezados interiores: fotografía real de una obra de Gabriela
   (detalle recortado + velo oscuro + acercamiento lento + ficha)
   ============================================================= */
@keyframes gdj-kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
.page-header.gdj-has-obra {
  background: #15110d; padding-bottom: clamp(4.5rem, 8vw, 6.5rem) !important;
}
.gdj-obra-photo {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  animation: gdj-kenburns 28s ease-in-out infinite alternate; will-change: transform;
}
.gdj-obra-veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%, rgba(15,12,9,.42), rgba(15,12,9,0) 100%),
    linear-gradient(180deg, rgba(15,12,9,.28), rgba(15,12,9,.08) 40%, rgba(15,12,9,.32));
}
.gdj-ficha {
  position: absolute; right: clamp(1rem, 3vw, 2rem); bottom: 1.9rem; z-index: 2; margin: 0;
  font-family: var(--serif); font-style: italic; font-size: .8rem; letter-spacing: .03em;
  color: rgba(243,236,221,.85) !important; text-shadow: 0 1px 6px rgba(0,0,0,.6);
  padding-left: .6rem; border-left: 2px solid var(--ochre);
}
.gdj-obra-sobre-mi .gdj-obra-photo     { background-image: url("assets/img/obras/sobre-mi.jpg?v=20261003"); background-position: 50% 30%; }
.gdj-obra-portafolio .gdj-obra-photo   { background-image: url("assets/img/obras/portafolio.jpg?v=20261003"); background-position: 50% 45%; }
.gdj-obra-escritura .gdj-obra-photo    { background-image: url("assets/img/obras/escritura.jpg?v=20261003"); background-position: 30% 50%; }
.gdj-obra-encargos .gdj-obra-photo     { background-image: url("assets/img/obras/tienda.jpg?v=20261003"); }
.gdj-obra-exposiciones .gdj-obra-photo { background-image: url("assets/img/obras/exposiciones.jpg?v=20261003"); background-position: 60% 50%; }
.gdj-obra-contacto .gdj-obra-photo     { background-image: url("assets/img/obras/contacto.jpg?v=20261003"); }
@media (prefers-reduced-motion: reduce) { .gdj-obra-photo { animation: none; } }

/* =============================================================
   7. Notas de Substack en Escritura (tarjeta destacada)
   ============================================================= */
ul.gdj-notes { list-style: none; margin: 2.2rem auto 0; padding: 0; display: grid; gap: 1.4rem; max-width: 640px; }
.gdj-note a {
  display: block; position: relative; background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 3px; padding: 1.8rem 2rem 1.5rem;
  box-shadow: 6px 6px 0 var(--oxblood);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.gdj-note a:hover { transform: translate(-2px, -3px); box-shadow: 10px 10px 0 var(--oxblood); }
.gdj-note a::before {
  content: "\201C"; position: absolute; top: -.35rem; left: 1.1rem; font-family: var(--serif);
  font-size: 4.5rem; line-height: 1; color: var(--oxblood); opacity: .25;
}
.gdj-note-kind { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--oxblood); margin-bottom: .9rem; }
.gdj-note-body { font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.35; margin: 0 0 1.1rem; color: var(--ink); }
.gdj-note-img { display: block; width: 100%; border-radius: 3px; margin: 0 0 1rem; }
.gdj-note-meta { display: block; font-size: .8rem; color: var(--ink-mute); letter-spacing: .04em; }
.gdj-note-link { display: inline-block; margin-top: .8rem; font-size: .88rem; font-weight: 600; color: var(--oxblood); transition: transform .35s var(--ease-out); }
.gdj-note a:hover .gdj-note-link { transform: translateX(4px); }

/* =============================================================
   8. Catálogo de obras (cotización) y página Encargos
   ============================================================= */
/* Cuadrícula del Portafolio: imagen + título, como sala de exposición */
.gdj-cat-title { margin: 0 0 1.4rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.gdj-cat-title::after { margin-inline: 0 !important; }
.woo-shop + .woo-shop, .gdj-catalogo .gdj-cat-title:not(:first-child) { margin-top: 3.5rem; }
.woo-shop ul.products li.product .price, .woo-shop ul.products li.product .button { display: none !important; }
.woo-shop ul.products li.product .woocommerce-loop-product__title {
  text-align: center; font-style: italic; text-transform: uppercase; letter-spacing: .06em;
  font-size: .95rem !important; padding: 1rem 1rem 1.2rem !important;
}
.woo-shop ul.products li.product a.woocommerce-LoopProduct-link { display: block; }
.woo-shop .woocommerce-result-count, .woo-shop .woocommerce-ordering { display: none; }

/* Ficha de obra */
.single-product .woocommerce { padding-top: clamp(2rem, 5vw, 3.5rem); }
.single-product div.product { display: grid; grid-template-columns: 1fr; gap: 2rem 3.5rem; align-items: start; }
@media (min-width: 900px) { .single-product div.product { grid-template-columns: 1.05fr 1fr; } }
.single-product div.product .woocommerce-product-gallery, .single-product div.product .summary { width: 100% !important; float: none !important; margin: 0 !important; }
.single-product div.product .woocommerce-tabs, .single-product div.product .related { grid-column: 1 / -1; }
.single-product .woocommerce-product-gallery img { border-radius: 3px !important; box-shadow: 0 30px 60px -34px rgba(21,17,13,.65); }
.gdj-ficha-volver { display: inline-block; margin-bottom: 1.2rem; font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.gdj-ficha-volver:hover { color: var(--oxblood); }
.single-product .product_title { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0 0 .5rem; }
.gdj-precio { font-family: var(--serif); font-style: italic; color: var(--ink-mute); font-size: 1.15rem; }
.single-product div.product p.price { margin: 0 0 1.4rem; }
.gdj-ficha-datos { margin: 0 0 1.8rem; border-top: 1px solid var(--line); }
.gdj-ficha-datos > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.gdj-ficha-datos dt { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oxblood); padding-top: .15rem; }
.gdj-ficha-datos dd { margin: 0; color: var(--ink); }
.gdj-ficha-acciones { margin: 0 0 1rem; }
.gdj-ficha-acciones .wp-block-button__link { padding: 1rem 1.8rem !important; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }
.gdj-ficha-nota { font-size: .88rem; color: var(--ink-mute); margin: 0; }
.gdj-ficha-nota a { color: var(--oxblood); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.single-product .product_meta { margin-top: 1.4rem; font-size: .82rem; color: var(--ink-mute); }
.single-product .woocommerce-tabs ul.tabs { padding: 0 !important; margin: 0 0 1rem !important; }
.single-product .woocommerce-tabs ul.tabs::before { border-color: var(--line) !important; }
.single-product .woocommerce-tabs ul.tabs li { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
.single-product .woocommerce-tabs ul.tabs li::before, .single-product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.single-product .woocommerce-tabs ul.tabs li a { font-family: var(--serif); font-size: 1.2rem; color: var(--ink) !important; }
.single-product .related > h2 { font-size: 1.6rem; margin: 3rem 0 1.4rem; }
.single-product .related ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 1.4rem !important; }
.single-product .related ul.products li.product { width: 100% !important; margin: 0 !important; float: none !important; background: var(--paper); border-radius: 3px; overflow: hidden; }
.single-product .related ul.products li.product img { aspect-ratio: 4 / 5; object-fit: cover; margin: 0 !important; }
.single-product .related ul.products li.product .woocommerce-loop-product__title { text-align: center; font-family: var(--serif); font-style: italic; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; padding: .9rem; }
.single-product .related ul.products li.product .price { display: none; }

/* Encargos */
.gdj-quote { max-width: 820px; margin-inline: auto; text-align: center; }
.gdj-quote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.35; color: var(--ink); margin: 0; }
.gdj-quote p::before { content: "\201C"; color: var(--oxblood); }
.gdj-quote p::after { content: "\201D"; color: var(--oxblood); }
.gdj-encargo-texto { max-width: 760px; margin-inline: auto; }
.gdj-encargo-texto p { font-size: 1.05rem; line-height: 1.8; }
.gdj-proceso > .wp-block-column { padding-top: 1.4rem !important; }
.gdj-cta {
  background: #141a24; color: var(--bone); text-align: center;
  padding: clamp(3.5rem, 7vw, 5.5rem) 1.25rem !important; position: relative;
}
.gdj-cta h2 { color: var(--bone) !important; font-size: clamp(2rem, 4.5vw, 3rem); }
.gdj-cta p { color: rgba(239,230,214,.82); max-width: 560px; margin-inline: auto; }
.gdj-cta .wp-block-buttons { justify-content: center; margin-top: 1.6rem; }
body .gdj-cta .wp-block-button.btn-ghost.btn-ghost .wp-block-button__link { color: var(--bone) !important; border-color: rgba(239,230,214,.7) !important; }
body .gdj-cta .wp-block-button.btn-ghost.btn-ghost .wp-block-button__link::before { background: var(--bone); }
body .gdj-cta .wp-block-button.btn-ghost.btn-ghost .wp-block-button__link:hover { color: var(--ink) !important; }
main:has(> .gdj-cta:last-child) + .footer::before { background-image: none; }
/* WooCommerce agrega ::before/::after a la lista (clearfix); en cuadrícula ocupan una celda vacía */
.woo-shop ul.products::before, .woo-shop ul.products::after,
.single-product .related ul.products::before, .single-product .related ul.products::after { content: none !important; display: none !important; }
.gdj-catalogo { max-width: 1180px; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 960px) { .gdj-catalogo { padding-inline: 2rem; } }
.gdj-catalogo .woocommerce { padding: 0 !important; max-width: none; }
/* Encargos: columnas dentro del ancho del sitio */
.gdj-proceso { max-width: 1180px; margin-inline: auto !important; padding-inline: 1.25rem; }
@media (min-width: 960px) { .gdj-proceso { padding-inline: 2rem; } }
/* Ficha: mismo ancho y márgenes que el resto del sitio */
.single-product div.product { max-width: 1180px; margin-inline: auto; padding: clamp(2rem, 5vw, 3.5rem) 1.25rem clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 960px) { .single-product div.product { padding-inline: 2rem; } }

/* Portada en teléfono: foto vertical en alta resolución (la horizontal se veía ampliada y borrosa) */
@media (max-width: 781px) {
  .wp-block-cover.hero-cover .wp-block-cover__image-background { display: none; }
  .wp-block-cover.hero-cover { background: #15110d url("assets/img/hero-movil.jpg?v=20261006") 50% 38% / cover no-repeat; }
}
