/*
Theme Name: Tejido Cofrade
Theme URI: https://tejidocofrade.com/
Author: Tejido Cofrade
Description: Tema personalizado de Tejido Cofrade para impresión textil cofrade de alta definición sobre terciopelo y sarga.
 * Version: 2.4.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: tejido-cofrade
*/

:root {
  --purple-950: #130016;
  --purple-900: #21002c;
  --purple-800: #3a073f;
  --burgundy-900: #4a0921;
  --burgundy-800: #661233;
  --gold-600: #b98422;
  --gold-500: #d6ad45;
  --gold-300: #f4dc94;
  --cream-100: #fffaf0;
  --cream-200: #f2e8d4;
  --ink: #211724;
  --muted: #706271;
  --white: #fff;
  --header-height: 76px;
  --shadow: 0 22px 70px rgba(19, 0, 22, .2);
  --gold-shadow: 0 18px 46px rgba(214, 173, 69, .28);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 10% 16%, rgba(214, 173, 69, .12), transparent 24rem),
    linear-gradient(180deg, var(--cream-100), #fff 46%, var(--cream-100));
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}

body.lightbox-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

h1,
h2,
h3,
.brand,
.signature-card h3 {
  font-family: Cinzel, Georgia, serif;
  line-height: 1.12;
}

.skip-link {
  background: var(--gold-500);
  color: var(--purple-950);
  font-weight: 800;
  left: 1rem;
  padding: .75rem 1rem;
  position: fixed;
  top: -5rem;
  z-index: 100;
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  color: var(--white);
  left: 0;
  min-height: var(--header-height);
  position: fixed;
  right: 0;
  top: 0;
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
  z-index: 30;
}

.site-header.is-scrolled {
  background: rgba(33, 0, 44, .96);
  border-bottom: 1px solid rgba(244, 220, 148, .28);
  box-shadow: 0 14px 35px rgba(0, 0, 0, .22);
  backdrop-filter: blur(14px);
}

.nav-wrap {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1180px;
  min-height: var(--header-height);
  padding: .85rem 1rem;
}

.brand {
  align-items: center;
  color: var(--gold-300);
  display: inline-flex;
  font-size: clamp(1rem, 4vw, 1.35rem);
  font-weight: 800;
  gap: .7rem;
  white-space: nowrap;
}

.brand-mark {
  border: 1px solid rgba(244, 220, 148, .72);
  box-shadow: 0 0 24px rgba(214, 173, 69, .22);
  display: grid;
  height: 42px;
  overflow: hidden;
  place-items: center;
  width: 42px;
}

.brand-mark img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.nav-toggle {
  align-items: center;
  background: rgba(255, 250, 240, .1);
  border: 1px solid rgba(244, 220, 148, .38);
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.nav-toggle svg {
  height: 22px;
  width: 22px;
}

.site-nav {
  background: rgba(33, 0, 44, .98);
  border: 1px solid rgba(244, 220, 148, .22);
  display: none;
  left: 1rem;
  padding: .9rem;
  position: absolute;
  right: 1rem;
  top: calc(var(--header-height) + .3rem);
}

.site-nav.is-open {
  display: block;
}

.site-nav ul {
  display: grid;
  gap: .35rem;
  list-style: none;
}

.site-nav a {
  color: rgba(255, 250, 240, .92);
  display: block;
  font-size: .92rem;
  font-weight: 800;
  padding: .7rem .85rem;
  transition: background .2s ease, color .2s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: rgba(214, 173, 69, .14);
  color: var(--gold-300);
  outline: 0;
}

.hero {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(19, 0, 22, 1) 0%, rgba(19, 0, 22, .94) 30%, rgba(19, 0, 22, .54) 58%, rgba(19, 0, 22, .24) 100%),
    linear-gradient(180deg, rgba(19, 0, 22, .18), rgba(19, 0, 22, .92)),
    radial-gradient(circle at 82% 50%, rgba(214, 173, 69, .18), transparent 28rem),
    radial-gradient(circle at 18% 30%, rgba(102, 18, 51, .72), transparent 34rem),
    linear-gradient(135deg, var(--purple-950), #25002f 54%, #0b000d);
  color: var(--white);
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  padding: calc(var(--header-height) + 1.2rem) 1rem 1.4rem;
  position: relative;
}

.hero-veil {
  background:
    radial-gradient(circle at 74% 56%, rgba(244, 220, 148, .13), transparent 24rem),
    linear-gradient(90deg, rgba(19, 0, 22, .18), rgba(19, 0, 22, .02) 55%, rgba(19, 0, 22, .22)),
    linear-gradient(180deg, rgba(19, 0, 22, .08), rgba(19, 0, 22, .72));
  inset: 0;
  position: absolute;
  z-index: 1;
}

.hero-ornament {
  border: 1px solid rgba(244, 220, 148, .22);
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 240, .04),
    inset 0 0 70px rgba(214, 173, 69, .06);
  inset: 6.5rem 1rem 1rem;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.hero-ornament::before,
.hero-ornament::after {
  background: linear-gradient(90deg, transparent, var(--gold-300), transparent);
  content: "";
  height: 1px;
  left: 8%;
  position: absolute;
  right: 8%;
}

.hero-ornament::before {
  top: -.5rem;
}

.hero-ornament::after {
  bottom: -.5rem;
}

.hero::before {
  background:
    linear-gradient(var(--gold-300), var(--gold-300)) left 1.5rem top 7rem / 76px 1px no-repeat,
    linear-gradient(var(--gold-300), var(--gold-300)) left 1.5rem top 7rem / 1px 76px no-repeat,
    linear-gradient(var(--gold-300), var(--gold-300)) right 1.5rem bottom 1.5rem / 76px 1px no-repeat,
    linear-gradient(var(--gold-300), var(--gold-300)) right 1.5rem bottom 1.5rem / 1px 76px no-repeat;
  content: "";
  inset: 0;
  opacity: .62;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.hero::after {
  background: url("img/portada.jpeg") center / contain no-repeat;
  bottom: 1.2rem;
  content: "";
  height: min(76vh, 760px);
  opacity: .56;
  pointer-events: none;
  position: absolute;
  right: clamp(1rem, 4vw, 5rem);
  transform: translateY(calc(var(--hero-y, 0px) * -.06));
  width: min(52vw, 760px);
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
}

.hero-inner,
.container {
  margin: 0 auto;
  max-width: 1180px;
  width: 100%;
}

.hero-inner {
  align-items: center;
  display: block;
  position: relative;
  z-index: 3;
}

.hero-content {
  border-left: 1px solid rgba(244, 220, 148, .38);
  max-width: 820px;
  padding: 2.2rem 0 1.4rem 1.15rem;
  position: relative;
  transform: translateY(-1.3rem);
  z-index: 2;
}

.hero-content::before {
  background: linear-gradient(180deg, transparent, var(--gold-300), transparent);
  content: "";
  height: min(76%, 430px);
  left: -1px;
  position: absolute;
  top: 12%;
  width: 1px;
}

.eyebrow,
.kicker {
  color: var(--gold-300);
  display: inline-flex;
  font-size: .78rem;
  font-weight: 900;
  gap: .55rem;
  letter-spacing: .1em;
  margin-bottom: .85rem;
  text-transform: uppercase;
}

.eyebrow::before {
  background: var(--gold-500);
  content: "";
  height: 1px;
  margin-top: .65rem;
  width: 42px;
}

.hero-devotion {
  color: var(--gold-300);
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(.95rem, 1.9vw, 1.35rem);
  font-weight: 700;
  margin-bottom: .75rem;
  text-shadow: 0 8px 28px rgba(0, 0, 0, .42);
}

.hero h1 {
  color: var(--cream-100);
  font-size: clamp(2.4rem, 7.1vw, 4.95rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: .98;
  margin-bottom: 1rem;
  max-width: 880px;
  text-shadow: 0 16px 46px rgba(0, 0, 0, .48);
  text-wrap: balance;
}

.hero h1 span {
  color: var(--gold-300);
  display: block;
  font-size: clamp(1.35rem, 3.2vw, 2.35rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.08;
  margin-top: .65rem;
}

.hero h1 small {
  color: var(--cream-100);
  display: block;
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.05rem, 2.2vw, 1.65rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  margin-top: .35rem;
}

.hero-copy {
  color: rgba(255, 250, 240, .9);
  font-size: clamp(1rem, 1.75vw, 1.18rem);
  max-width: 680px;
}

.hero-actions,
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.7rem;
}

.button {
  align-items: center;
  border: 1px solid transparent;
  display: inline-flex;
  font-size: .9rem;
  font-weight: 900;
  gap: .6rem;
  justify-content: center;
  min-height: 48px;
  padding: .82rem 1.1rem;
  text-transform: uppercase;
  transition: box-shadow .22s ease, transform .22s ease, background .22s ease;
}

.button-primary {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: var(--purple-950);
}

.button-secondary {
  background: rgba(255, 250, 240, .08);
  border-color: rgba(244, 220, 148, .48);
  color: var(--cream-100);
}

.button:hover,
.button:focus-visible {
  box-shadow: var(--gold-shadow);
  outline: 0;
  transform: translateY(-3px);
}

.hero-proof {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr;
  margin-top: 1.4rem;
  max-width: 820px;
}

.hero-proof div {
  background: rgba(19, 0, 22, .62);
  border: 1px solid rgba(244, 220, 148, .26);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
  color: rgba(255, 250, 240, .9);
  padding: .9rem 1rem;
}

.hero-proof strong {
  color: var(--gold-300);
  display: block;
  font-family: Cinzel, Georgia, serif;
  font-size: 1.08rem;
}

.section {
  padding: 4.6rem 1rem;
  position: relative;
}

.section-heading {
  margin-bottom: 2rem;
  max-width: 860px;
}

.section-heading.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.kicker {
  color: var(--burgundy-800);
}

h2 {
  color: var(--purple-900);
  font-size: clamp(1.85rem, 6vw, 3.25rem);
  font-weight: 800;
  margin-bottom: .9rem;
  text-wrap: balance;
}

.lead {
  color: var(--muted);
  font-size: 1.04rem;
  max-width: 780px;
}

.essence-section::before,
.gallery-section::before {
  background: linear-gradient(90deg, transparent, rgba(214, 173, 69, .65), transparent);
  content: "";
  height: 1px;
  left: 10vw;
  position: absolute;
  right: 10vw;
  top: 0;
}

.essence-grid,
.contact-grid {
  display: grid;
  gap: 1.25rem;
}

.essence-copy,
.contact-panel {
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(214, 173, 69, .26);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 4vw, 2rem);
}

.essence-copy p + p {
  margin-top: 1rem;
}

.tech-panel {
  background:
    linear-gradient(160deg, rgba(33, 0, 44, .96), rgba(102, 18, 51, .96)),
    url("img/img7.jpeg") center/cover;
  color: var(--cream-100);
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.25rem, 4vw, 2rem);
  position: relative;
}

.tech-panel::before {
  border: 1px solid rgba(244, 220, 148, .48);
  content: "";
  inset: .72rem;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.tech-panel h3 {
  color: var(--gold-300);
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

.tech-panel ul,
.contact-list {
  display: grid;
  gap: .72rem;
  list-style: none;
}

.tech-panel li {
  border-bottom: 1px solid rgba(244, 220, 148, .18);
  padding-bottom: .7rem;
}

.cards-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.advantage-card {
  background: var(--white);
  border: 1px solid rgba(58, 7, 63, .08);
  box-shadow: 0 12px 34px rgba(33, 0, 44, .08);
  min-height: 100%;
  overflow: hidden;
  padding: 1.35rem;
  position: relative;
  transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}

.advantage-card::before {
  background: linear-gradient(90deg, var(--gold-500), var(--burgundy-800));
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.advantage-card::after {
  background: radial-gradient(circle, rgba(214, 173, 69, .24), transparent 70%);
  content: "";
  height: 120px;
  position: absolute;
  right: -55px;
  top: -55px;
  width: 120px;
}

.advantage-card:hover {
  border-color: rgba(214, 173, 69, .52);
  box-shadow: var(--gold-shadow);
  transform: translateY(-7px);
}

.advantage-card span {
  color: rgba(91, 16, 41, .26);
  display: block;
  font-family: Cinzel, Georgia, serif;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: .6rem;
}

.advantage-card h3 {
  color: var(--purple-900);
  font-size: 1.18rem;
  margin-bottom: .55rem;
}

.advantage-card p,
.gallery-caption p {
  color: var(--muted);
  font-size: .96rem;
}

.product-signatures {
  background:
    linear-gradient(90deg, rgba(19, 0, 22, .98), rgba(58, 7, 63, .96), rgba(19, 0, 22, .98)),
    url("img/logo.jpeg") center/cover;
  border-block: 1px solid rgba(244, 220, 148, .24);
  color: var(--gold-300);
  padding: 1.4rem 1rem;
  position: relative;
}

.product-signatures::before,
.product-signatures::after {
  background: linear-gradient(90deg, transparent, rgba(244, 220, 148, .7), transparent);
  content: "";
  height: 1px;
  left: 8vw;
  position: absolute;
  right: 8vw;
}

.product-signatures::before {
  top: .65rem;
}

.product-signatures::after {
  bottom: .65rem;
}

.product-signatures-grid {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.signature-card {
  align-items: center;
  background: rgba(255, 250, 240, .055);
  border: 1px solid rgba(244, 220, 148, .2);
  display: grid;
  gap: .65rem;
  grid-template-columns: 42px 1fr;
  min-height: 72px;
  padding: .8rem;
  position: relative;
  transition: background .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}

.signature-card::after {
  background: linear-gradient(90deg, transparent, rgba(244, 220, 148, .32), transparent);
  content: "";
  height: 1px;
  left: .8rem;
  opacity: 0;
  position: absolute;
  right: .8rem;
  top: .45rem;
  transition: opacity .24s ease;
}

.signature-card:hover {
  background: rgba(255, 250, 240, .09);
  border-color: rgba(244, 220, 148, .5);
  box-shadow: var(--gold-shadow);
  transform: translateY(-4px);
}

.signature-card:hover::after {
  opacity: 1;
}

.signature-icon {
  align-items: center;
  background: radial-gradient(circle, rgba(244, 220, 148, .18), rgba(214, 173, 69, .04));
  border: 1px solid rgba(244, 220, 148, .28);
  display: inline-flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.signature-icon img {
  height: 100%;
  object-fit: contain;
  padding: .12rem;
  width: 100%;
}

.signature-card h3 {
  color: var(--gold-300);
  font-size: clamp(.95rem, 2.4vw, 1.2rem);
  font-weight: 800;
  text-transform: uppercase;
}

.gallery-grid {
  columns: 1;
  column-gap: 1rem;
}

.gallery-card {
  background: var(--white);
  break-inside: avoid;
  box-shadow: 0 16px 42px rgba(33, 0, 44, .12);
  margin: 0 0 1rem;
  overflow: hidden;
}

.gallery-media {
  background: var(--purple-950);
  overflow: hidden;
  position: relative;
}

.gallery-media img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: opacity .45s ease, transform .55s ease;
  width: 100%;
}

.gallery-card.wide .gallery-media img {
  aspect-ratio: 16 / 10;
}

.gallery-badge {
  background: rgba(33, 0, 44, .9);
  color: var(--gold-300);
  font-size: .72rem;
  font-weight: 900;
  left: .75rem;
  letter-spacing: .04em;
  padding: .45rem .65rem;
  position: absolute;
  text-transform: uppercase;
  top: .75rem;
  z-index: 2;
}

.zoom-btn {
  align-items: center;
  background: rgba(19, 0, 22, .54);
  border: 0;
  color: var(--cream-100);
  cursor: pointer;
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  position: absolute;
  transition: opacity .26s ease;
}

.zoom-btn::before {
  background: rgba(214, 173, 69, .95);
  color: var(--purple-950);
  content: "⌕";
  display: grid;
  font-size: 2.2rem;
  font-weight: 900;
  height: 56px;
  line-height: 1;
  place-items: center;
  width: 56px;
}

.gallery-card:hover .gallery-media img {
  opacity: .78;
  transform: scale(1.07);
}

.gallery-card:hover .zoom-btn,
.zoom-btn:focus-visible {
  opacity: 1;
}

.zoom-btn:focus-visible {
  outline: 3px solid var(--gold-300);
  outline-offset: -6px;
}

.gallery-caption {
  padding: 1rem;
}

.gallery-caption h3 {
  color: var(--purple-900);
  font-size: 1.08rem;
  margin-bottom: .35rem;
}

.section-dark {
  background:
    linear-gradient(135deg, rgba(19, 0, 22, .96), rgba(58, 7, 63, .95)),
    url("img/img2.jpg") center/cover;
  color: var(--cream-100);
}

.section-dark h2,
.section-dark .kicker {
  color: var(--gold-300);
}

.section-dark .contact-panel {
  background: rgba(255, 250, 240, .08);
}

.section-dark p,
.contact-list a {
  color: rgba(255, 250, 240, .88);
}

.contact-list {
  margin-top: 1.35rem;
}

.contact-list a {
  font-weight: 800;
}

.site-footer {
  background: #0b000d;
  border-top: 1px solid rgba(244, 220, 148, .22);
  color: rgba(255, 250, 240, .68);
  padding: 1.4rem 1rem;
  text-align: center;
}

.site-footer strong {
  color: var(--gold-300);
  font-family: Cinzel, Georgia, serif;
}

.float-whatsapp {
  align-items: center;
  animation: pulse 1.9s infinite;
  background: #22c55e;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  bottom: 1rem;
  box-shadow: 0 14px 34px rgba(34, 197, 94, .35);
  color: #fff;
  display: inline-flex;
  height: 58px;
  justify-content: center;
  position: fixed;
  right: 1rem;
  width: 58px;
  z-index: 28;
}

.float-whatsapp svg {
  height: 30px;
  width: 30px;
}

.lightbox {
  align-items: center;
  background: rgba(10, 0, 12, .88);
  display: none;
  inset: 0;
  justify-content: center;
  padding: 1rem;
  position: fixed;
  z-index: 60;
}

.lightbox.is-open {
  display: flex;
}

.lightbox-dialog {
  background: var(--purple-950);
  border: 1px solid rgba(244, 220, 148, .36);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
  color: var(--cream-100);
  max-height: 92vh;
  max-width: min(1100px, 96vw);
  overflow: hidden;
}

.lightbox-dialog img {
  background: #050005;
  max-height: 72vh;
  object-fit: contain;
  width: 100%;
}

.lightbox-dialog figcaption {
  padding: 1rem;
}

.lightbox-dialog h2 {
  color: var(--gold-300);
  font-size: clamp(1.35rem, 4vw, 2rem);
  margin-bottom: .3rem;
}

.lightbox-close {
  background: var(--gold-500);
  border: 0;
  color: var(--purple-950);
  cursor: pointer;
  font-size: 2rem;
  font-weight: 900;
  height: 48px;
  line-height: 1;
  position: fixed;
  right: 1rem;
  top: 1rem;
  width: 48px;
  z-index: 61;
}

.promo-modal {
  align-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(214, 173, 69, .12), transparent 22rem),
    rgba(10, 0, 12, .78);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  padding: 1rem;
  pointer-events: none;
  position: fixed;
  transition: opacity .42s ease;
  z-index: 55;
  backdrop-filter: blur(8px);
}

.promo-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.promo-dialog {
  background:
    radial-gradient(circle at 82% 18%, rgba(244, 220, 148, .12), transparent 12rem),
    linear-gradient(145deg, rgba(33, 0, 44, .98), rgba(74, 9, 33, .97)),
    var(--purple-950);
  border: 1px solid rgba(244, 220, 148, .36);
  box-shadow: 0 34px 96px rgba(0, 0, 0, .58), inset 0 0 70px rgba(214, 173, 69, .06);
  color: var(--cream-100);
  display: grid;
  max-width: min(920px, 94vw);
  overflow: hidden;
  position: relative;
  transform: translateY(18px) scale(.96);
  transition: transform .48s cubic-bezier(.2, .8, .2, 1);
}

.promo-dialog::before {
  border: 1px solid rgba(244, 220, 148, .34);
  content: "";
  inset: .7rem;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.promo-dialog::after {
  background:
    linear-gradient(90deg, transparent, rgba(244, 220, 148, .8), transparent),
    linear-gradient(90deg, transparent, rgba(244, 220, 148, .34), transparent);
  background-position: center top, center bottom;
  background-repeat: no-repeat;
  background-size: 70% 1px, 70% 1px;
  content: "";
  inset: .35rem;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.promo-modal.is-open .promo-dialog {
  transform: translateY(0) scale(1);
}

.promo-dialog img {
  aspect-ratio: 4 / 5;
  height: 100%;
  max-height: 72vh;
  object-fit: cover;
  opacity: .9;
  width: 100%;
}

.promo-dialog picture,
.promo-dialog img {
  background: var(--purple-950);
}

.promo-content {
  align-content: center;
  display: grid;
  padding: clamp(1.6rem, 4.5vw, 2.6rem);
  position: relative;
  z-index: 3;
}

.promo-content::before {
  background: linear-gradient(180deg, transparent, rgba(244, 220, 148, .82), transparent);
  content: "";
  height: 74%;
  left: 1rem;
  position: absolute;
  top: 13%;
  width: 1px;
}

.promo-content h2 {
  color: var(--gold-300);
  font-size: clamp(1.65rem, 5vw, 3rem);
  margin-bottom: .65rem;
  text-shadow: 0 10px 32px rgba(0, 0, 0, .34);
}

.promo-content p {
  color: rgba(255, 250, 240, .88);
  font-size: 1.03rem;
  margin-bottom: .55rem;
  max-width: 34rem;
}

.promo-close {
  background: rgba(19, 0, 22, .72);
  border: 1px solid rgba(244, 220, 148, .52);
  color: var(--gold-300);
  cursor: pointer;
  font-size: 2rem;
  font-weight: 900;
  height: 44px;
  line-height: 1;
  position: absolute;
  right: .9rem;
  top: .9rem;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  width: 44px;
  z-index: 4;
}

.promo-close:hover,
.promo-close:focus-visible {
  background: var(--gold-500);
  color: var(--purple-950);
  outline: 0;
  transform: rotate(4deg) scale(1.04);
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .55), 0 14px 34px rgba(34, 197, 94, .35);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(34, 197, 94, 0), 0 14px 34px rgba(34, 197, 94, .35);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0), 0 14px 34px rgba(34, 197, 94, .35);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 560px) {
  .hero-proof,
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-signatures-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gallery-grid {
    columns: 2;
  }
}

@media (min-width: 820px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    background: transparent;
    border: 0;
    display: block;
    padding: 0;
    position: static;
  }

  .site-nav ul {
    align-items: center;
    display: flex;
    gap: .25rem;
  }

  .site-nav a {
    padding: .6rem .72rem;
  }

  .hero,
  .section {
    padding-inline: 1.5rem;
  }

  .hero-content {
    transform: translateY(-.6rem);
  }

  .hero::after {
    bottom: 2.4rem;
    height: min(82vh, 820px);
    opacity: .68;
    right: clamp(1.5rem, 5vw, 6.5rem);
    width: min(50vw, 820px);
  }

  .hero-proof,
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .product-signatures-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .signature-card {
    justify-items: center;
    min-height: 128px;
    padding: 1rem .75rem;
    text-align: center;
    grid-template-columns: 1fr;
  }

  .signature-icon {
    height: 56px;
    width: 56px;
  }

  .signature-icon img {
    padding: .08rem;
  }

  .essence-grid {
    align-items: stretch;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
  }

  .contact-grid {
    align-items: center;
    grid-template-columns: 1fr .8fr;
  }

  .promo-dialog {
    grid-template-columns: minmax(300px, .82fr) minmax(340px, 1fr);
  }

  .promo-dialog img {
    aspect-ratio: auto;
  }

  .gallery-grid {
    columns: 3;
  }
}

@media (max-width: 819px) {
  .hero {
    background:
      linear-gradient(180deg, rgba(19, 0, 22, .86), rgba(19, 0, 22, .96)),
      radial-gradient(circle at 18% 30%, rgba(102, 18, 51, .72), transparent 34rem),
      linear-gradient(135deg, var(--purple-950), #25002f 54%, #0b000d);
  }

  .hero::after {
    bottom: .25rem;
    height: 42vh;
    left: 50%;
    opacity: .24;
    right: auto;
    transform: translateX(-50%);
    width: min(96vw, 620px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  }
}

@media (min-width: 1080px) {
  .gallery-grid {
    columns: 4;
  }
}


/* =========================================================
   TEJIDO COFRADE 2.0 — CATÁLOGO Y PRESUPUESTOS
   ========================================================= */
.product-page,
.quote-page {
  background: var(--cream-100);
}

.product-hero {
  background:
    radial-gradient(circle at 82% 40%, rgba(214, 173, 69, .18), transparent 26rem),
    linear-gradient(135deg, var(--purple-950), var(--purple-900) 58%, var(--burgundy-900));
  color: var(--white);
  min-height: 58svh;
  padding: calc(var(--header-height) + 4rem) 1rem 4rem;
  position: relative;
}

.product-hero-grid {
  align-items: center;
  display: grid;
  gap: 2rem;
}

.product-hero-copy {
  max-width: 760px;
}

.product-hero .kicker {
  color: var(--gold-300);
}

.product-hero h1 {
  color: var(--cream-100);
  font-size: clamp(2.35rem, 7vw, 4.8rem);
  margin: .45rem 0 1rem;
  text-wrap: balance;
}

.product-lead {
  color: rgba(255, 250, 240, .9);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  max-width: 720px;
}

.product-back {
  color: var(--gold-300);
  display: inline-block;
  font-weight: 800;
  margin-bottom: 1.4rem;
}

.product-hero-media {
  border: 1px solid rgba(244, 220, 148, .35);
  box-shadow: var(--shadow);
  margin: 0;
  overflow: hidden;
  position: relative;
}

.product-hero-media::after {
  border: 1px solid rgba(244, 220, 148, .42);
  content: "";
  inset: .7rem;
  pointer-events: none;
  position: absolute;
}

.product-hero-media img {
  aspect-ratio: 4 / 3;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.product-content-grid {
  display: grid;
  gap: 1.5rem;
}

.product-description,
.product-features,
.quote-form,
.quote-aside {
  background: var(--white);
  border: 1px solid rgba(214, 173, 69, .25);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 4vw, 2.25rem);
}

.product-description p + p {
  margin-top: 1rem;
}

.product-features ul {
  display: grid;
  gap: .8rem;
  list-style: none;
  margin-top: 1rem;
}

.product-features li {
  border-bottom: 1px solid rgba(58, 7, 63, .1);
  padding: .8rem 0 .8rem 1.7rem;
  position: relative;
}

.product-features li::before {
  color: var(--gold-600);
  content: "✦";
  left: 0;
  position: absolute;
  top: .8rem;
}

.product-cta-section {
  background: linear-gradient(180deg, var(--cream-100), #fff);
}

.product-cta {
  align-items: center;
  background: linear-gradient(135deg, var(--purple-900), var(--burgundy-800));
  box-shadow: var(--shadow);
  color: var(--cream-100);
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.4rem, 4vw, 2.6rem);
}

.product-cta h2 {
  color: var(--cream-100);
}

.product-cta .kicker {
  color: var(--gold-300);
}

.product-cta p {
  color: rgba(255, 250, 240, .86);
  max-width: 700px;
}

.signature-card a {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding: 1.2rem;
  width: 100%;
}

.signature-link {
  color: var(--burgundy-800);
  font-size: .78rem;
  font-weight: 900;
  margin-top: .45rem;
  text-transform: uppercase;
}

.catalog-cta {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.quote-hero {
  min-height: 46svh;
}

.quote-layout {
  display: grid;
  gap: 1.5rem;
}

.quote-form {
  display: grid;
  gap: 1.35rem;
}

.quote-section-heading h2 {
  font-size: clamp(1.6rem, 4vw, 2.35rem);
  margin: .25rem 0 0;
}

.form-grid {
  display: grid;
  gap: 1rem;
}

.quote-form label {
  color: var(--purple-900);
  display: grid;
  font-size: .88rem;
  font-weight: 800;
  gap: .4rem;
}

.quote-form input,
.quote-form select,
.quote-form textarea {
  background: #fffdf8;
  border: 1px solid rgba(58, 7, 63, .2);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  min-height: 48px;
  padding: .72rem .8rem;
  width: 100%;
}

.quote-form textarea {
  min-height: 150px;
  resize: vertical;
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  border-color: var(--gold-600);
  box-shadow: 0 0 0 3px rgba(214, 173, 69, .18);
  outline: none;
}

.form-full,
.file-field {
  width: 100%;
}

.file-field small {
  color: var(--muted);
  font-weight: 500;
}

.quote-message {
  border: 1px solid;
  font-weight: 800;
  padding: .9rem 1rem;
}

.quote-success {
  border-color: rgba(35, 112, 70, .35);
  background: rgba(35, 112, 70, .07);
}

.quote-error {
  border-color: rgba(150, 25, 35, .35);
  background: rgba(150, 25, 35, .07);
}

.quote-aside {
  align-self: start;
  background: linear-gradient(160deg, var(--purple-900), var(--burgundy-800));
  color: var(--cream-100);
}

.quote-aside h2 {
  color: var(--cream-100);
}

.quote-aside .kicker {
  color: var(--gold-300);
}

.quote-aside p {
  color: rgba(255, 250, 240, .86);
  margin-bottom: 1.4rem;
}

.quote-honeypot {
  height: 0;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 0;
}

@media (min-width: 720px) {
  .product-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr);
  }

  .product-content-grid,
  .quote-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  }

  .product-cta {
    grid-template-columns: 1fr auto;
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .product-hero {
    min-height: 66svh;
  }
}

/* Fase 2 — catálogo: icono genérico para "Otros" */
.signature-icon-other img {
    opacity: 0.18;
    filter: grayscale(1);
}

/* Fase 3 — Portfolio filtrable */
.portfolio-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  margin: 2rem auto 1rem;
}

.portfolio-filter {
  appearance: none;
  border: 1px solid rgba(91, 60, 102, .28);
  background: rgba(255,255,255,.78);
  color: var(--color-dark, #241a26);
  border-radius: 999px;
  padding: .72rem 1.05rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.portfolio-filter:hover,
.portfolio-filter:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(91, 60, 102, .55);
  outline: none;
}

.portfolio-filter.is-active {
  background: var(--color-purple, #5b3c66);
  color: #fff;
  border-color: var(--color-purple, #5b3c66);
  box-shadow: 0 8px 22px rgba(44, 26, 52, .16);
}

.portfolio-status {
  min-height: 1.25rem;
  margin: 0 0 1rem;
  text-align: center;
  color: rgba(36,26,38,.62);
  font-size: .8rem;
}

.portfolio-grid .gallery-card[hidden] {
  display: none;
}

.portfolio-grid .gallery-card {
  transition: opacity .25s ease, transform .25s ease;
}

.portfolio-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(91,60,102,.14);
  text-align: center;
}

.portfolio-cta p {
  margin: 0;
  color: rgba(36,26,38,.72);
}

@media (max-width: 640px) {
  .portfolio-toolbar {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: .2rem .1rem .5rem;
    scrollbar-width: thin;
  }
  .portfolio-filter { flex: 0 0 auto; }
  .portfolio-cta { align-items: stretch; }
  .portfolio-cta .button { width: 100%; }
}


/* Fase 22 — integración de producción */
.site-footer-premium { padding: 2.2rem 1.2rem; }
.footer-inner { max-width: 1180px; margin: 0 auto; display:flex; justify-content:space-between; gap:1.5rem; align-items:center; flex-wrap:wrap; }
.footer-inner p { margin:.2rem 0; }
.footer-social-links { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.footer-social-links a { color:inherit; text-decoration:none; font-weight:700; }
.footer-social-links a:hover, .footer-social-links a:focus-visible { text-decoration:underline; }
.tc-floating-social { position:fixed; right:22px; bottom:22px; z-index:10000; display:flex; flex-direction:column; gap:10px; }
.tc-floating-social a { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-sizing:border-box; border:2px solid rgba(255,255,255,.92); box-shadow:0 7px 20px rgba(0,0,0,.28); transition:transform .2s ease, box-shadow .2s ease; }
.tc-floating-social a:hover, .tc-floating-social a:focus-visible { transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.34); outline:none; }
.tc-floating-social svg { width:29px; height:29px; display:block; fill:#fff; }
.tc-floating-facebook { background:#1877F2; }
.tc-floating-whatsapp { background:#25D366; }
.promo-modal .promo-dialog { position:relative; }
.promo-modal .promo-dialog > img { display:block; width:100%; height:auto; }
.promo-modal .promo-content .button { cursor:pointer; }
@media (max-width:560px) {
  .tc-floating-social { right:14px; bottom:14px; gap:8px; }
  .tc-floating-social a { width:50px; height:50px; }
  .tc-floating-social svg { width:27px; height:27px; }
  .footer-inner { align-items:flex-start; }
}


.process-section{position:relative;overflow:hidden;background:#fbf5ea;border-top:1px solid rgba(91,16,41,.06);border-bottom:1px solid rgba(91,16,41,.06)}
.process-bg{position:absolute;inset:0;background:radial-gradient(circle at 15% 50%,rgba(255,255,255,.92),transparent 35%),radial-gradient(circle at 85% 50%,rgba(214,173,69,.10),transparent 38%);pointer-events:none}
.process-inner{position:relative}
.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:38px;position:relative}
.process-grid::before{content:"";position:absolute;top:39px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,#d6ad45 12%,#d6ad45 88%,transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.4s ease .25s}
.process-section:has(.process-step.is-visible) .process-grid::before{transform:scaleX(1)}
.process-step{position:relative;background:rgba(255,255,255,.88);border:1px solid rgba(58,7,63,.09);box-shadow:0 14px 34px rgba(33,0,44,.08);padding:58px 22px 25px;min-height:260px;text-align:left;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.process-step:hover{transform:translateY(-9px);box-shadow:0 20px 42px rgba(33,0,44,.14)}
.process-icon{position:absolute;top:8px;left:50%;transform:translateX(-50%) scale(.72);width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#fffdf9;border:1px solid #d6ad45;box-shadow:0 0 0 7px rgba(255,253,249,.92);color:#5b103d;font:700 27px/1 Georgia,serif;transition:transform .6s cubic-bezier(.2,.8,.2,1),background .35s ease}
.process-step.is-visible .process-icon{transform:translateX(-50%) scale(1);transition-delay:.18s}
.process-step:hover .process-icon{transform:translateX(-50%) rotate(8deg) scale(1.08);background:#fdf6df}
.process-number{display:inline-block;border:1px solid rgba(214,173,69,.65);padding:3px 8px;color:#5b103d;font:700 .78rem/1 Inter,Arial,sans-serif;margin-bottom:10px}
.process-step h3{color:var(--purple-900);font-size:1.08rem;margin-bottom:9px}
.process-step p{color:var(--muted);font-size:.94rem;line-height:1.7}
.process-cta{text-align:center;margin-top:34px}
.stagger-1{transition-delay:.05s}.stagger-2{transition-delay:.14s}.stagger-3{transition-delay:.23s}.stagger-4{transition-delay:.32s}.stagger-5{transition-delay:.41s}.stagger-6{transition-delay:.50s}
@media(max-width:900px){.advantage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.process-grid::before{display:none}}
@media(max-width:560px){.advantage-grid,.process-grid{grid-template-columns:1fr}.advantage-card{padding:1.2rem}.process-step{min-height:0;padding:58px 20px 23px}.process-grid{gap:16px}.stagger-1,.stagger-2,.stagger-3,.stagger-4,.stagger-5,.stagger-6{transition-delay:0s}}



/* FASE 10 — TESTIMONIOS PREMIUM + WHATSAPP ICONO */
.testimonials-section{position:relative;overflow:hidden;background:#170019;color:#fff;padding-top:90px;padding-bottom:0;isolation:isolate}
.testimonials-bg{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(22,0,25,.97),rgba(38,5,36,.88),rgba(22,0,25,.97)),url("img/portada.jpeg") center/cover;filter:saturate(.75)}
.testimonials-section:after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#d4a94f,transparent)}
.testimonials-heading{max-width:850px;margin:0 auto 38px}
.testimonials-heading .kicker{color:#e0b75e}
.testimonials-heading h2{color:#fff;margin:9px 0 12px}
.testimonials-heading h2 em{color:#e0bd72;font-style:normal}
.testimonials-heading .lead{color:#dfd0d8}
.testimonials-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.testimonial-card{position:relative;padding:27px 27px 24px;background:linear-gradient(145deg,rgba(66,8,46,.92),rgba(37,3,33,.96));border:1px solid rgba(215,174,76,.7);box-shadow:0 15px 40px rgba(0,0,0,.22);min-height:330px;display:flex;flex-direction:column}
.testimonial-stars{color:#e5bd52;font-size:21px;letter-spacing:3px;margin-bottom:7px}
.quote-mark{font-family:Georgia,serif;font-size:68px;line-height:.7;color:#d9ad45;height:34px}
.testimonial-card p{font:italic 17px/1.55 Georgia,serif;color:#f4e9df;margin:9px 0 23px;flex:1}
.testimonial-client{display:flex;align-items:center;gap:13px;padding-top:16px;border-top:1px solid rgba(224,185,92,.55)}
.client-crest{width:46px;height:46px;border:1px solid #d7aa4d;border-radius:50%;display:grid;place-items:center;color:#e0b75e;font-size:20px;flex:0 0 46px}
.testimonial-client strong{display:block;font:600 14px/1.3 Cinzel,Georgia,serif;color:#fff}
.testimonial-client span{display:block;margin-top:5px;color:#d9bd87;font:700 9px Inter,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.trust-points{max-width:1120px;margin:38px auto 0;padding:26px 0 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:15px;border-top:1px solid rgba(214,171,73,.35)}
.trust-points>div{display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:center}
.trust-points span{grid-row:span 2;color:#e1b74f;font-size:26px;text-align:center}
.trust-points strong{color:#fff;font:700 11px Inter,Arial,sans-serif;letter-spacing:.13em}
.trust-points small{color:#cdbfc7;font:400 11px Inter,Arial,sans-serif;margin-top:3px}
.floating-whatsapp{width:58px!important;height:58px!important;border-radius:50%!important;padding:0!important;display:grid!important;place-items:center!important;font-size:0!important;line-height:1!important}
.floating-whatsapp:before{content:"";width:25px;height:25px;border:3px solid #fff;border-radius:50%;display:block;position:relative}
.floating-whatsapp:after{content:"";position:absolute;width:8px;height:8px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-18deg);margin:17px 0 0 -19px}
@media(max-width:900px){.testimonials-grid{grid-template-columns:1fr}.testimonial-card{min-height:0}.trust-points{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.testimonials-section{padding-top:65px}.testimonial-card{padding:23px}.testimonial-card p{font-size:16px}.trust-points{grid-template-columns:1fr 1fr;gap:22px 10px}.trust-points>div{grid-template-columns:28px 1fr}.floating-whatsapp{width:54px!important;height:54px!important}}



/* FASE 11 — PRESUPUESTO PREMIUM */
.quote-section{position:relative;overflow:hidden;background:#fbf8f2;padding-top:100px;padding-bottom:105px}
.quote-container{max-width:1160px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(430px,1.08fr);gap:65px;align-items:start;position:relative}
.quote-intro{padding-top:15px}
.quote-intro h2{font-family:Cinzel,Georgia,serif;font-size:clamp(2.4rem,4.3vw,4.35rem);line-height:1.03;color:#28002e;margin:12px 0 20px}
.quote-intro h2 em{font-style:normal;color:#75183f}
.quote-intro>p{max-width:550px;color:#6d626d;font-size:17px;line-height:1.7;margin:0 0 32px}
.quote-benefits{border-top:1px solid #ddcbb2}
.quote-benefits>div{display:grid;grid-template-columns:45px 145px 1fr;gap:10px;align-items:center;padding:17px 0;border-bottom:1px solid #e5d8c7}
.quote-benefits span{font:700 18px Cinzel,Georgia,serif;color:#d1a33e}
.quote-benefits strong{font:700 12px Inter,Arial,sans-serif;color:#39072f;text-transform:uppercase;letter-spacing:.05em}
.quote-benefits small{color:#746b73;font:400 12px/1.45 Inter,Arial,sans-serif}
.quote-form{background:#240229;padding:33px 34px 31px;border:1px solid #b88735;box-shadow:0 22px 55px rgba(50,10,35,.16)}
.quote-form-head{display:flex;flex-direction:column;gap:6px;margin-bottom:23px}
.quote-form-head span{color:#dfb657;font:700 10px Inter,Arial,sans-serif;letter-spacing:.16em}
.quote-form-head strong{color:#fff;font:700 25px Cinzel,Georgia,serif}
.quote-form label{display:flex;flex-direction:column;gap:7px;color:#eadfe5;font:600 10px Inter,Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px}
.quote-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.quote-form input,.quote-form select,.quote-form textarea{width:100%;box-sizing:border-box;border:1px solid rgba(229,190,101,.34);background:#fff;color:#342535;padding:12px 13px;font:400 14px Inter,Arial,sans-serif;text-transform:none;letter-spacing:0;outline:none;transition:border-color .2s,box-shadow .2s}
.quote-form textarea{resize:vertical;min-height:115px}
.quote-form input::placeholder,.quote-form textarea::placeholder{color:#9a9098}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{border-color:#e0b65b;box-shadow:0 0 0 3px rgba(224,182,91,.12)}
.form-check{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:9px!important;text-transform:none!important;letter-spacing:0!important;color:#cdbfc8!important;font-size:10px!important;line-height:1.4}
.form-check input{width:auto;margin-top:1px}
.quote-submit{width:100%;justify-content:center;margin-top:5px;border:0;cursor:pointer}
.quote-submit:disabled{opacity:.8}
.quote-note{text-align:center;color:#bcaeb8;font:400 10px/1.5 Inter,Arial,sans-serif;margin:14px 0 0}
.quote-decor{position:absolute;width:260px;height:260px;border:1px solid rgba(184,135,53,.14);border-radius:50%;pointer-events:none}
.quote-decor-left{left:-190px;top:80px}.quote-decor-right{right:-180px;bottom:40px}
@media(max-width:900px){
 .quote-container{grid-template-columns:1fr;gap:40px}.quote-intro{padding-top:0}.quote-intro>p{max-width:760px}
}
@media(max-width:560px){
 .quote-section{padding-top:70px;padding-bottom:70px}.quote-form{padding:25px 20px}.quote-form .form-row{grid-template-columns:1fr;gap:0}.quote-benefits>div{grid-template-columns:40px 1fr}.quote-benefits small{grid-column:2}.quote-intro h2{font-size:2.35rem}
}



/* FASE 13 — BANNER PROMOCIONAL INTEGRADO */
.promo-banner-section{background:#fbf8f2;padding:24px 20px 8px}
.promo-banner{position:relative;overflow:hidden;max-width:1160px;min-height:185px;margin:auto;display:grid;grid-template-columns:minmax(0,1.55fr) 120px minmax(300px,1fr);align-items:center;gap:28px;padding:25px 38px;background:linear-gradient(110deg,#27022d,#4b0d3d 58%,#2a052f);border:1px solid #b98b39;box-shadow:0 14px 35px rgba(48,7,39,.14)}
.promo-banner:before{content:"";position:absolute;inset:7px;border:1px solid rgba(229,190,101,.28);pointer-events:none}
.promo-glow{position:absolute;width:280px;height:280px;border-radius:50%;right:22%;top:-150px;background:rgba(215,170,69,.08);filter:blur(4px)}
.promo-left,.promo-right,.promo-seal{position:relative;z-index:2}
.promo-kicker{display:block;color:#e1b85b;font:700 10px Inter,Arial,sans-serif;letter-spacing:.17em;margin-bottom:7px}
.promo-left h2{font:700 clamp(1.55rem,2.8vw,2.35rem)/1.05 Cinzel,Georgia,serif;color:#fff;margin:0 0 9px}
.promo-left h2 em{color:#e1bb69;font-style:normal}
.promo-left p{max-width:560px;color:#dbcbd3;font:400 12px/1.55 Inter,Arial,sans-serif;margin:0}
.promo-seal{width:86px;height:86px;border:1px solid #d5aa52;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(25,0,28,.45);box-shadow:inset 0 0 0 5px rgba(215,170,82,.06)}
.promo-seal span{color:#e3be6a;font:700 23px Cinzel,Georgia,serif}
.promo-seal small{color:#d7c5a7;font:700 6px/1.3 Inter,Arial,sans-serif;letter-spacing:.12em;text-align:center;margin-top:2px}
.promo-right{border-left:1px solid rgba(224,181,84,.38);padding-left:25px;display:flex;flex-direction:column;align-items:flex-start}
.promo-right strong{color:#fff;font:700 11px Inter,Arial,sans-serif;letter-spacing:.09em}
.promo-right>span{color:#cbbbc4;font:400 11px/1.45 Inter,Arial,sans-serif;margin:6px 0 13px}
.promo-button{display:inline-flex;align-items:center;gap:12px;padding:10px 14px;background:#c49a43;color:#240128;text-decoration:none;font:800 9px Inter,Arial,sans-serif;letter-spacing:.08em;transition:.25s}
.promo-button:hover{background:#e2bf6b;transform:translateY(-1px)}
.promo-button b{font-size:15px;line-height:9px}
@media(max-width:820px){
 .promo-banner{grid-template-columns:1fr 90px;padding:24px;gap:20px}.promo-right{grid-column:1/-1;border-left:0;border-top:1px solid rgba(224,181,84,.38);padding:17px 0 0}.promo-seal{grid-column:2;grid-row:1;justify-self:end;width:72px;height:72px}.promo-left{grid-column:1;grid-row:1}
}
@media(max-width:560px){
 .promo-banner{grid-template-columns:1fr;padding:23px 20px}.promo-left,.promo-right,.promo-seal{grid-column:1;grid-row:auto}.promo-seal{justify-self:start;width:64px;height:64px;margin-bottom:3px}.promo-seal span{font-size:18px}.promo-right{padding-top:15px}.promo-banner-section{padding:18px 14px 5px}
}



/* FASE 24 — REPARACIÓN VISUAL FINAL */
/* Cabecera siempre visible sobre el hero */
.site-header {
  background: rgba(33, 0, 44, .96);
  border-bottom: 1px solid rgba(244, 220, 148, .28);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}

/* Iconos de catálogo grandes, como en la previsualización aprobada */
@media (min-width: 820px) {
  .signature-card { min-height: 210px; padding: 1.25rem .8rem; }
  .signature-icon { width: 145px; height: 145px; }
  .signature-icon img { padding: .12rem; }
}

/* FAQ premium */
.faq-section { background: linear-gradient(180deg,#fffdf9,#f7efe5); }
.faq-list { max-width: 920px; margin: 2.2rem auto 0; border-top: 1px solid rgba(91,16,41,.16); }
.faq-list details { border-bottom: 1px solid rgba(91,16,41,.16); background: rgba(255,255,255,.55); }
.faq-list summary { list-style: none; cursor: pointer; padding: 1.05rem 1.2rem; color: var(--purple-900); font-weight: 800; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { color: var(--gold-600); font-size:1.2rem; transition:transform .2s ease; }
.faq-list details[open] summary span { transform:rotate(45deg); }
.faq-answer { padding: 0 1.2rem 1.15rem; color: var(--muted); max-width: 820px; }


/* =========================================================
   TEJIDO COFRADE 2.0 — VISUAL + RESPONSIVE FINAL OVERRIDES
   ========================================================= */

/* The header must be solid and readable from the first pixel. */
.site-header,
.site-header.is-scrolled {
  background: #21002c;
  border-bottom: 1px solid rgba(244,220,148,.42);
  box-shadow: 0 10px 28px rgba(19,0,22,.24);
  backdrop-filter: none;
}

.nav-wrap { min-height: 78px; }
.brand { color:#f4dc94; }
.brand-mark { width:46px; height:46px; flex:0 0 46px; background:#130016; }
.brand-mark img { object-fit:cover; object-position:center; }

/* Desktop navigation: never hide the menu at desktop widths. */
@media (min-width: 821px) {
  .nav-toggle { display:none !important; }
  .site-nav {
    display:block !important;
    position:static !important;
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
  }
  .site-nav ul {
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:.15rem;
    list-style:none;
  }
  .site-nav a {
    color:#fffaf0;
    display:block;
    font-size:.78rem;
    font-weight:800;
    padding:.55rem .62rem;
    white-space:nowrap;
  }
  .site-nav a:hover,.site-nav a:focus-visible { color:#f4dc94; background:rgba(244,220,148,.10); }
}

@media (max-width: 820px) {
  .site-header,.site-header.is-scrolled { background:#21002c; }
  .nav-toggle { display:inline-flex !important; }
}

/* Remove the old promotional strip from the homepage. */
.promo-banner-section { display:none !important; }

/* Stable section rhythm and centred content. */
.section { padding-top:6rem; padding-bottom:6rem; }
.section-heading.center { max-width:900px; }
.section-heading.center .lead { margin-left:auto; margin-right:auto; }

/* Process: four cards on desktop, two on tablet, one on mobile. */
.process-section { background:#fbf5ea; }
.process-grid {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:20px;
  margin-top:42px;
}
.process-grid::before { transform:scaleX(1) !important; }
.process-step {
  min-width:0;
  min-height:285px;
  padding:78px 24px 28px;
  background:rgba(255,255,255,.94);
}
.process-icon { top:12px; }
.process-cta { margin-top:38px; }

/* Catalogue: six balanced cards, with genuinely large icon artwork. */
.product-signatures { padding-top:5.5rem; padding-bottom:5.5rem; }
.product-signatures-grid {
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:14px;
}
.signature-card {
  display:block !important;
  min-width:0;
  min-height:240px !important;
  padding:.9rem .5rem !important;
  text-align:center;
}
.signature-card a { padding:1rem .45rem; }
.signature-icon {
  width:145px !important;
  height:145px !important;
  margin:0 auto .7rem;
}
.signature-card h3 { font-size:1rem; line-height:1.05; }
.signature-link { font-size:.72rem; }

/* Portfolio filter and masonry gallery. */
.portfolio-toolbar { margin-top:2.3rem; }
.portfolio-filter { border-color:rgba(91,60,102,.28); }
.portfolio-filter.is-active { background:#5b3c66; color:#fff; }
.portfolio-status { min-height:1.4rem; font-weight:600; }
.portfolio-grid { columns:4; column-gap:18px; }
.portfolio-grid .gallery-card { margin-bottom:18px; break-inside:avoid; }

/* Testimonials: proper premium dark block, with three cards. */
.testimonials-section {
  background:#170019 !important;
  color:#fff;
  padding-top:6.2rem !important;
  padding-bottom:0 !important;
}
.testimonials-bg { opacity:1 !important; }
.testimonials-heading h2 { color:#fff !important; }
.testimonials-heading .lead { color:#dfd0d8 !important; }
.testimonials-grid {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:20px;
}
.testimonial-card {
  min-height:330px;
  border:1px solid rgba(215,174,76,.72);
  background:linear-gradient(145deg,rgba(66,8,46,.96),rgba(37,3,33,.98));
}
.trust-points { grid-template-columns:repeat(4,minmax(0,1fr)); }

/* Quote section: intro + form side by side on desktop. */
.quote-section { background:#fbf8f2 !important; }
.quote-container {
  display:grid !important;
  grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr) !important;
  gap:56px;
  align-items:start;
}
.quote-form {
  width:100%;
  min-width:0;
  background:#240229 !important;
  color:#fff;
}
.quote-form .form-row {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px;
}
.quote-form input,.quote-form select,.quote-form textarea { min-width:0; }

/* FAQ: visible accordion rows and usable touch targets. */
.faq-section { background:linear-gradient(180deg,#fffdf9,#f7efe5) !important; }
.faq-list {
  max-width:980px;
  margin:2.5rem auto 0;
  border-top:1px solid rgba(91,16,41,.18);
}
.faq-list details { background:rgba(255,255,255,.72); }
.faq-list summary {
  min-height:68px;
  font-size:.92rem;
}
.faq-list summary span {
  flex:0 0 32px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid rgba(185,132,34,.45);
}

/* Footer: real two-column desktop footer, stacked on mobile. */
.site-footer-premium {
  background:#0b000d !important;
  color:rgba(255,250,240,.72);
  padding:3rem 1.2rem !important;
  border-top:1px solid rgba(244,220,148,.28);
}
.footer-inner {
  max-width:1180px;
  margin:0 auto;
  display:flex !important;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
}
.footer-inner p { margin:.25rem 0; }
.footer-social-links { display:flex !important; gap:1.2rem; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.footer-social-links a { color:#f4dc94; }

/* Never let the fixed contact buttons cover content at the bottom. */
.tc-floating-social { right:18px; bottom:18px; }

@media (max-width: 1100px) {
  .product-signatures-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .signature-card { min-height:235px !important; }
  .portfolio-grid { columns:3; }
  .quote-container { grid-template-columns:minmax(0,.8fr) minmax(420px,1.2fr) !important; gap:34px; }
}

@media (max-width: 900px) {
  .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .testimonials-grid { grid-template-columns:1fr !important; }
  .trust-points { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quote-container { grid-template-columns:1fr !important; }
  .quote-form .form-row { grid-template-columns:1fr !important; }
}

@media (max-width: 640px) {
  .section { padding-top:4.4rem; padding-bottom:4.4rem; }
  .product-signatures-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .signature-icon { width:118px !important; height:118px !important; }
  .portfolio-grid { columns:1; }
  .process-grid { grid-template-columns:1fr !important; }
  .process-step { min-height:0; }
  .trust-points { grid-template-columns:1fr 1fr; }
  .footer-inner { flex-direction:column !important; align-items:flex-start !important; }
  .footer-social-links { justify-content:flex-start; }
  .tc-floating-social { right:12px; bottom:12px; }
}


/* =========================================================
   TEJIDO COFRADE 2.1 — REPAIR RELEASE
   ========================================================= */
html { scroll-behavior: smooth; }
body { overflow-x:hidden; }

/* Header: deterministic desktop/mobile layout. */
.site-header, .site-header.is-scrolled {
  background:#21002c !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  border-bottom:1px solid rgba(244,220,148,.42) !important;
  z-index:9999 !important;
}
.nav-wrap { min-height:78px !important; }
.tc-direct-menu { margin:0 !important; padding:0 !important; }
@media (min-width:821px) {
  .site-nav { display:block !important; position:static !important; background:transparent !important; border:0 !important; padding:0 !important; }
  .site-nav ul.tc-direct-menu { display:flex !important; align-items:center; justify-content:flex-end; gap:2px; list-style:none; }
  .site-nav a { color:#fffaf0 !important; font-size:.73rem !important; padding:.55rem .48rem !important; }
  .site-nav a:hover, .site-nav a:focus-visible { color:#f4dc94 !important; background:rgba(244,220,148,.10) !important; }
  .nav-toggle { display:none !important; }
}
@media (max-width:820px) {
  .nav-toggle { display:inline-flex !important; }
  .site-nav { display:none !important; }
  .site-nav.is-open { display:block !important; }
  .site-nav ul.tc-direct-menu { display:grid !important; }
}

/* Catalogue: white heading + genuinely large icon artwork. */
.product-signatures { background:linear-gradient(135deg,#1b0023,#33012f 55%,#1c001e) !important; color:#fff !important; }
.product-signatures .kicker, .product-signatures h2, .product-signatures .lead { color:#fff !important; }
.product-signatures .kicker { color:#f4dc94 !important; }
.product-signatures-grid { grid-template-columns:repeat(6,minmax(0,1fr)) !important; align-items:stretch; }
.signature-card { min-height:275px !important; background:rgba(255,255,255,.035) !important; border:1px solid rgba(244,220,148,.30) !important; }
.signature-icon { width:168px !important; height:168px !important; }
.signature-icon img { width:100% !important; height:100% !important; object-fit:contain !important; padding:0 !important; }
.signature-card h3 { color:#f4dc94 !important; font-size:1.05rem !important; }
.signature-link { color:#f4dc94 !important; }

/* Portfolio filter: make JS state and hidden cards unambiguous. */
.portfolio-toolbar { display:flex !important; justify-content:center; flex-wrap:wrap; gap:.65rem; }
.portfolio-filter { appearance:none; cursor:pointer; background:#fff !important; color:#240229 !important; border:1px solid rgba(91,60,102,.30) !important; }
.portfolio-filter.is-active { background:#5b3c66 !important; color:#fff !important; border-color:#5b3c66 !important; }
.portfolio-grid { column-count:4 !important; column-gap:18px !important; }
.portfolio-grid .gallery-card[hidden] { display:none !important; visibility:hidden !important; }
.portfolio-grid .gallery-card { break-inside:avoid !important; display:inline-block; width:100%; vertical-align:top; }
.gallery-badge { z-index:4; }

/* Process cards: no reliance on animation for layout. */
.process-grid { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:20px !important; }
.process-step { display:block !important; opacity:1 !important; transform:none !important; visibility:visible !important; min-height:300px !important; }
.process-step h3 { margin-top:.35rem; }

/* Testimonials: stable cards, readable text. */
.testimonials-section { min-height:auto !important; }
.testimonials-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.testimonial-card { display:flex !important; flex-direction:column; justify-content:flex-start; min-height:320px !important; opacity:1 !important; transform:none !important; }
.testimonial-card p { color:#fffaf0 !important; }
.testimonial-client { margin-top:auto; }
.trust-points { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; }

/* Quote section: correct selectors used by the actual homepage markup. */
.quote-container { display:grid !important; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important; gap:42px !important; align-items:start !important; }
.quote-intro, .quote-form { min-width:0 !important; }
.quote-form { display:block !important; padding:34px !important; }
.quote-form .form-row { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:18px !important; margin-bottom:18px; }
.quote-form > label:not(.form-check) { display:grid !important; gap:.45rem !important; margin-bottom:18px !important; }
.quote-form label { color:#fff !important; }
.quote-form input, .quote-form select, .quote-form textarea { box-sizing:border-box !important; }
.quote-form .form-check { display:flex !important; align-items:flex-start; gap:.65rem; margin:14px 0 20px; }
.quote-form .form-check input { width:auto; min-height:0; margin-top:.25rem; }
.quote-form .form-check a { color:#f4dc94; text-decoration:underline; }
.quote-submit { width:auto !important; }

/* FAQ: details are native and remain usable even if JS fails. */
.faq-list { display:grid !important; gap:0 !important; }
.faq-list details { display:block !important; }
.faq-list summary { display:flex !important; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; }
.faq-answer { display:block !important; padding:0 1.2rem 1.25rem !important; color:#4a354a; line-height:1.7; }

/* Footer + data treatment. */
.site-footer-premium { background:#0b000d !important; }
.footer-inner { display:grid !important; grid-template-columns:1.2fr auto; gap:1rem 2rem; align-items:center; }
.footer-legal { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:.45rem 1rem; padding-top:1rem; margin-top:1rem; border-top:1px solid rgba(244,220,148,.16); font-size:.78rem; line-height:1.55; }
.footer-legal span { flex-basis:100%; color:rgba(255,250,240,.60); }
.footer-legal a { color:#f4dc94; text-decoration:underline; }

/* Product pages: force image visibility and predictable sizing. */
.product-hero-grid { min-height:420px; }
.product-hero-media { min-height:320px !important; display:block !important; visibility:visible !important; opacity:1 !important; }
.product-hero-media img { display:block !important; min-height:320px; object-fit:cover !important; }

@media (max-width:1100px) {
  .site-nav a { font-size:.68rem !important; padding-left:.38rem !important; padding-right:.38rem !important; }
  .product-signatures-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .portfolio-grid { column-count:3 !important; }
}
@media (max-width:900px) {
  .process-grid, .testimonials-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .quote-container { grid-template-columns:1fr !important; }
  .quote-form .form-row { grid-template-columns:1fr !important; }
  .trust-points { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .footer-inner { grid-template-columns:1fr !important; }
  .footer-social-links { justify-content:flex-start !important; }
}
@media (max-width:640px) {
  .brand { font-size:1rem !important; }
  .brand-mark { width:42px !important; height:42px !important; }
  .product-signatures-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .signature-icon { width:126px !important; height:126px !important; }
  .portfolio-grid { column-count:1 !important; }
  .process-grid, .testimonials-grid { grid-template-columns:1fr !important; }
  .trust-points { grid-template-columns:1fr 1fr !important; }
  .footer-legal { display:grid !important; }
  .product-hero-media, .product-hero-media img { min-height:240px !important; }
}

/* v2.2 — project galleries: one portfolio card, many detail images */
.gallery-project-cover { display:block; width:100%; height:100%; text-decoration:none; }
.gallery-project-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.gallery-caption h3 a { color:inherit; text-decoration:none; }
.gallery-caption h3 a:hover { color:#9a7a2f; }
.gallery-project-more { display:inline-flex; gap:.35rem; margin-top:.55rem; color:#7a4c68; font-size:.82rem; font-weight:700; text-decoration:none; }
.gallery-project-more:hover { color:#9a7a2f; }
.project-hero { padding:7.5rem 0 4rem; background:linear-gradient(135deg,#21002c,#3a103e 55%,#17001d); color:#fff; }
.project-hero-grid { display:grid; grid-template-columns:1fr minmax(340px,560px); gap:4rem; align-items:center; }
.project-hero-copy h1 { margin:.6rem 0 1rem; color:#fffaf0; }
.project-lead { max-width:650px; font-size:1.1rem; line-height:1.8; color:rgba(255,255,255,.82); }
.project-hero-media { margin:0; border:1px solid rgba(244,220,148,.35); padding:10px; background:rgba(255,255,255,.06); box-shadow:0 22px 55px rgba(0,0,0,.28); }
.project-hero-media img { display:block; width:100%; max-height:650px; object-fit:cover; }
.project-gallery-section { background:#f8f3f6; }
.project-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.project-detail-image { margin:0; overflow:hidden; background:#fff; box-shadow:0 12px 30px rgba(32,0,40,.10); }
.project-detail-image img { display:block; width:100%; height:100%; min-height:280px; object-fit:cover; transition:transform .5s ease; }
.project-detail-image:hover img { transform:scale(1.025); }
.project-empty { margin-top:25px; padding:25px; display:flex; flex-direction:column; gap:5px; text-align:center; background:#fff; border:1px solid #eadfe7; }
.project-empty span { color:#705a69; }
@media (max-width:820px) {
  .project-hero { padding:6rem 0 3rem; }
  .project-hero-grid { grid-template-columns:1fr; gap:2rem; }
  .project-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .project-detail-grid { grid-template-columns:1fr; }
  .project-detail-image img { min-height:0; }
}


/* FASE 2.2.3 — ANUNCIO POPUP RESTAURADO */
.promo-modal .promo-dialog{grid-template-columns:minmax(260px,42%) minmax(320px,1fr);width:min(920px,94vw);border-radius:2px}
.promo-modal .promo-dialog>img{min-height:360px;object-fit:cover}
.promo-modal .promo-content .kicker{color:var(--gold-300);font-weight:800;letter-spacing:.16em}
.promo-modal .promo-content .button{justify-self:start;margin-top:1rem}
@media (max-width:700px){
  .promo-modal{padding:.65rem}
  .promo-modal .promo-dialog{grid-template-columns:1fr;max-height:92vh;overflow:auto}
  .promo-modal .promo-dialog>img{aspect-ratio:16/9;max-height:34vh;min-height:0}
  .promo-modal .promo-content{padding:1.35rem 1.4rem 1.6rem}
  .promo-modal .promo-content h2{font-size:clamp(1.45rem,8vw,2.2rem)}
  .promo-modal .promo-content p{font-size:.95rem}
}


/* FASE 27 — PÁGINAS LEGALES */
.legal-page { padding: 118px 0 90px; background: var(--cream-100); }
.legal-page .legal-wrap { max-width: 980px; margin: 0 auto; }
.legal-page .legal-kicker { color: var(--gold-600); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.legal-page h1 { margin: 10px 0 28px; font-family: Cinzel, Georgia, serif; color: var(--purple-900); font-size: clamp(34px, 5vw, 54px); }
.legal-page .legal-intro { font-size: 18px; line-height: 1.8; color: var(--muted); margin-bottom: 42px; }
.legal-page h2 { margin: 42px 0 14px; font-family: Cinzel, Georgia, serif; color: var(--burgundy-800); font-size: 25px; }
.legal-page h3 { margin: 28px 0 10px; color: var(--purple-900); font-size: 19px; }
.legal-page p, .legal-page li { color: var(--ink); font-size: 16px; line-height: 1.8; }
.legal-page ul { padding-left: 24px; }
.legal-page a { color: var(--burgundy-800); text-decoration: underline; text-underline-offset: 3px; }
.legal-page .legal-card { padding: 26px 30px; border: 1px solid rgba(185,132,34,.35); border-left: 4px solid var(--gold-500); background: #fff; box-shadow: 0 14px 38px rgba(19,0,22,.07); border-radius: 12px; }
.legal-page .legal-update { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(112,98,113,.22); color: var(--muted); font-size: 14px; }
.privacy-first-layer { margin: 22px 0 26px; padding: 16px 18px; border-radius: 10px; background: rgba(242,232,212,.62); border: 1px solid rgba(185,132,34,.25); font-size: 13px; line-height: 1.6; color: var(--ink); }
.privacy-first-layer strong { color: var(--purple-900); }
@media (max-width: 700px) { .legal-page { padding: 100px 0 60px; } .legal-page .legal-wrap { padding: 0 18px; } .legal-page .legal-card { padding: 20px; } .legal-page p, .legal-page li { font-size: 15px; } }


.privacy-consent { display:flex; gap:10px; align-items:flex-start; margin:18px 0 24px; color:var(--ink); font-size:14px; line-height:1.55; cursor:pointer; }
.privacy-consent input { flex:0 0 auto; margin-top:4px; width:18px; height:18px; accent-color:var(--burgundy-800); }
.privacy-consent a { color:var(--burgundy-800); font-weight:700; text-decoration:underline; }