/* =============================================================================
   Ramos Granite & Marble LLC — hoja de estilos
   Mobile-first. Identidad: mármol marfil, granito negro absoluto, oro cepillado.
   Motivo estructural: el corte a 45° (esquinas biseladas en botones y piezas).
   ============================================================================= */

/* ---------- Fuentes (autoalojadas) ---------- */
@font-face {
  font-family: "Marcellus";
  src: url("../fonts/marcellus-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations"), url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}

/* Solo el símbolo "&": la "&" de Archivo tiene una forma poco legible; se usa una "&" clásica (Inter, OFL) */
@font-face {
  font-family: "Amp";
  src: url("../fonts/amp-regular.woff2") format("woff2");
  font-weight: 100 500; font-style: normal; font-display: swap; unicode-range: U+0026;
}
@font-face {
  font-family: "Amp";
  src: url("../fonts/amp-semibold.woff2") format("woff2");
  font-weight: 501 900; font-style: normal; font-display: swap; unicode-range: U+0026;
}

/* ---------- Tokens ---------- */
:root {
  --ivory: #EFE7DA;
  --paper: #F7F2EA;
  --granite: #1D1B19;
  --granite-2: #2A2724;
  --granite-3: #3B3632;
  --gold: #C8A24E;
  --gold-hi: #E4C680;
  --gold-deep: #7A5A1C;
  --ink: #24211D;
  --ink-2: #57514A;
  --line: rgba(36, 33, 29, .16);
  --line-dark: rgba(228, 198, 128, .22);
  --brushed: linear-gradient(118deg, #B58A34 0%, #DDBE77 38%, #F0D99D 50%, #CFAE60 64%, #A97F2D 100%);

  --serif: "Marcellus", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Amp", "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --cut: 12px;               /* bisel de botones */
  --cut-lg: 28px;            /* bisel de piezas grandes */
  --wrap: 1180px;
  --gutter: clamp(1rem, 4.5vw, 2.5rem);
  --hdr-h: 68px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 8px); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; font-weight: 400;
  color: var(--ink); background: #E9DFCF;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
svg { width: 1.25em; height: 1.25em; flex: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
html.i18n-pending [data-i18n], html.i18n-pending [data-i18n-num] { visibility: hidden; }

:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.sec--granite :focus-visible, .closing :focus-visible, .ftr :focus-visible, .trust :focus-visible { outline-color: var(--gold-hi); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: fixed; top: .5rem; left: .5rem; z-index: 100; padding: .6rem 1rem;
  background: var(--granite); color: var(--ivory); text-decoration: none; transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* =============================================================================
   Fondo de piedra + haz de luz
   ============================================================================= */
.stone { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #EDE4D6; pointer-events: none; }
.stone__slab, .stone__veins, .stone__light { position: absolute; inset: -2%; }
.stone__slab { background: url("../img/marble-960.webp") 58% 50% / cover no-repeat; }

/* Luz natural amplia: roza toda la superficie, apenas perceptible */
.stone__light { overflow: hidden; }
.stone__light span {
  position: absolute; top: -40%; left: 0; width: 46%; height: 180%;
  background: linear-gradient(90deg, rgba(255,248,232,0) 0%, rgba(255,246,226,.38) 48%, rgba(255,250,238,.5) 52%, rgba(255,248,232,0) 100%);
  mix-blend-mode: soft-light; opacity: 0;
  transform: translate3d(-120%, 0, 0) rotate(16deg);
  animation: sweep 28s var(--ease) 3.5s infinite;
  will-change: transform, opacity;
}
/* Reflejo sobre las vetas doradas: solo visible donde hay oro (máscara de vetas) */
.stone__veins {
  -webkit-mask: url("../img/veins-mask-960.webp") 58% 50% / cover no-repeat;
          mask: url("../img/veins-mask-960.webp") 58% 50% / cover no-repeat;
  overflow: hidden;
}
.stone__veins span {
  position: absolute; top: -40%; left: 0; width: 22%; height: 180%;
  background: linear-gradient(90deg, rgba(255,226,150,0) 0%, rgba(255,232,170,.85) 50%, rgba(255,226,150,0) 100%);
  mix-blend-mode: screen; opacity: 0;
  transform: translate3d(-120%, 0, 0) rotate(16deg);
  animation: sweep-veins 28s var(--ease) 3.5s infinite;
  will-change: transform, opacity;
}
@keyframes sweep {
  0%   { transform: translate3d(-120%, 0, 0) rotate(16deg); opacity: 0; }
  4%   { opacity: 1; }
  19%  { opacity: 1; }
  23%  { transform: translate3d(330%, 0, 0) rotate(16deg); opacity: 0; }
  100% { transform: translate3d(330%, 0, 0) rotate(16deg); opacity: 0; }
}
@keyframes sweep-veins {
  0%   { transform: translate3d(-120%, 0, 0) rotate(16deg); opacity: 0; }
  6%   { opacity: .55; }
  17%  { opacity: .7; }
  23%  { transform: translate3d(560%, 0, 0) rotate(16deg); opacity: 0; }
  100% { transform: translate3d(560%, 0, 0) rotate(16deg); opacity: 0; }
}
html.is-hidden .stone span { animation-play-state: paused; }
@media (min-width: 961px) {
  .stone__slab { background-image: url("../img/marble-1672.webp"); }
  .stone__veins { -webkit-mask-image: url("../img/veins-mask-1672.webp"); mask-image: url("../img/veins-mask-1672.webp"); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stone__light, .stone__veins { display: none; }
}

/* =============================================================================
   Botones (biselados a 45°)
   ============================================================================= */
.btn {
  --c: var(--cut);
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 52px; padding: .85rem 1.5rem;
  font-family: var(--sans); font-weight: 600; font-stretch: 108%; font-size: 1rem; line-height: 1.2; letter-spacing: .005em;
  text-decoration: none; text-align: center; cursor: pointer;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background-color .2s, color .2s, filter .2s;
}
.btn svg { width: 1.3em; height: 1.3em; }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
.btn--dark { background: var(--granite); color: var(--paper); }
.btn--dark svg { color: var(--gold-hi); }
.btn--dark:hover { background: #000; }
.btn--gold { background: var(--brushed); color: var(--granite); }
.btn--gold:hover { filter: brightness(1.06) saturate(1.05); }
.btn--ghost { clip-path: none; border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: rgba(29,27,25,.06); }
.btn--ghost-light { clip-path: none; border: 1px solid var(--line-dark); color: var(--ivory); background: transparent; }
.btn--ghost-light:hover { border-color: var(--gold-hi); }
.btn--sm { min-height: 44px; padding: .6rem 1rem; font-size: .9375rem; --c: 9px; }
.btn--lg { min-height: 58px; padding: 1rem 1.75rem; font-size: 1.0625rem; --c: 14px; }
.btn--block { display: flex; width: 100%; }

/* Sello "Estimados gratis" */
.stamp { display: flex; align-items: center; gap: .7rem; font-size: .975rem; color: var(--ink-2); }
.stamp strong { color: var(--ink); font-weight: 700; font-stretch: 110%; }
.stamp__mark {
  width: 22px; height: 22px; flex: none; background: var(--brushed);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 55% 100%, 0 100%);
}
.stamp--center { justify-content: center; }

/* =============================================================================
   Encabezado
   ============================================================================= */
.hdr { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--hdr-h); transition: background-color .3s, box-shadow .3s; }
.hdr__in { height: 100%; display: flex; align-items: center; gap: .75rem; }
.hdr__logo { flex: none; display: block; border-radius: 50%; }
.hdr__logo img { width: 52px; height: 52px; transition: width .3s var(--ease), height .3s var(--ease); }
.hdr.is-scrolled { background: rgba(244, 238, 228, .94); box-shadow: 0 1px 0 var(--line); }
@supports (backdrop-filter: blur(8px)) { .hdr.is-scrolled { background: rgba(244, 238, 228, .82); backdrop-filter: blur(10px) saturate(1.2); } }
.hdr.is-scrolled .hdr__logo img { width: 44px; height: 44px; }

.controls { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.lang { display: flex; align-items: center; height: 40px; padding: 0 .25rem; }
.lang__btn {
  min-width: 34px; height: 40px; padding: 0 .3rem;
  font-size: .875rem; font-weight: 500; font-stretch: 112%; letter-spacing: .04em; color: rgba(36,33,29,.72);
  position: relative;
}
.lang__btn[aria-pressed="true"] { color: var(--ink); font-weight: 700; }
.lang__btn[aria-pressed="true"]::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 7px; height: 2px; background: var(--gold); }
.lang__sep { width: 1px; height: 16px; background: var(--line); }

/* Botón de sonido: cuatro barras quietas o en movimiento */
/* Control de música: reproducir / pausar, visible y fácil de tocar */
.sound {
  height: 40px; min-width: 44px; padding: 0 .7rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border: 1px solid rgba(36, 33, 29, .28); border-radius: 999px; color: var(--ink);
  font-size: .8125rem; font-weight: 600; font-stretch: 108%; transition: background-color .2s, border-color .2s;
}
.sound:hover { background: rgba(29,27,25,.06); }
.sound svg { width: 15px; height: 15px; }
.sound__pause { display: none; }
.sound[aria-pressed="true"] .sound__play { display: none; }
.sound[aria-pressed="true"] .sound__pause { display: block; color: var(--gold-deep); }
.sound[aria-pressed="true"] { border-color: rgba(122, 90, 28, .55); }
.sound__bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound__bars i { display: block; width: 2.5px; height: 4px; background: currentColor; opacity: .55; transition: height .4s var(--ease), background-color .3s; }
.sound[aria-pressed="true"] .sound__bars i { background: var(--gold-deep); opacity: 1; animation: eq 1.6s ease-in-out infinite; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2) { animation-delay: -.5s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3) { animation-delay: -1.1s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(4) { animation-delay: -.8s; }
.sound__label { display: none; }
[data-route="contact"] .sound__label { display: inline; }
@media (min-width: 1500px) { .sound__label { display: inline; } }
.hdr__cta { white-space: nowrap; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 13px; } }
/* mientras el navegador espera el primer toque, el botón invita suavemente */
html.audio-waiting .sound { border-color: var(--gold); animation: sound-call 2.4s ease-in-out infinite; }
@keyframes sound-call { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 162, 78, 0); } 50% { box-shadow: 0 0 0 5px rgba(200, 162, 78, .22); } }
@media (prefers-reduced-motion: reduce) {
  .sound[aria-pressed="true"] .sound__bars i { animation: none; height: 10px; }
  html.audio-waiting .sound { animation: none; }
}

.hdr__cta { display: none; }
.hdr__menu { width: 44px; height: 44px; display: grid; place-items: center; margin-right: -.5rem; }
.hdr__menu svg { width: 26px; height: 26px; }
.hdr__menu .when-open, .hdr__menu[aria-expanded="true"] .when-closed { display: none; }
.hdr__menu[aria-expanded="true"] .when-open { display: block; }

/* En la portada móvil el sello grande ya está a la vista: el logo del encabezado aparece al bajar */
@media (max-width: 959px) {
  [data-route="home"] .hdr:not(.is-scrolled) .hdr__logo { opacity: 0; pointer-events: none; }
  .hdr__logo { transition: opacity .3s; }
}
[data-route="contact"] .hdr--slim .hdr__logo { visibility: hidden; }

/* Menú móvil: panel a pantalla completa */
.nav {
  position: fixed; inset: var(--hdr-h) 0 0; z-index: 39;
  display: flex; flex-direction: column; gap: 2rem; padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  background: var(--paper); overflow-y: auto;
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s;
}
.nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s var(--ease); }
.nav__list a {
  display: block; padding: .55rem 0; font-family: var(--serif); font-size: 1.9rem; line-height: 1.2;
  text-decoration: none; border-bottom: 1px solid var(--line);
}
.nav__cta-mobile { margin-top: auto; }
html.menu-open { overflow: hidden; }
html.menu-open .hdr { background: var(--paper); }

@media (min-width: 760px) {
  .hdr__cta { display: inline-flex; }
}
@media (min-width: 1100px) {
  :root { --hdr-h: 84px; }
  .hdr__menu, .nav__cta-mobile { display: none; }
  .nav {
    position: static; inset: auto; z-index: auto; flex-direction: row; padding: 0; gap: 0; margin-left: 1.25rem;
    background: none; overflow: visible; visibility: visible; opacity: 1; transform: none; transition: none;
  }
  .nav__list { display: flex; gap: .2rem; }
  .nav__list a {
    padding: .5rem .7rem; font-family: var(--sans); font-size: .9375rem; font-weight: 500; font-stretch: 104%;
    border: 0; position: relative;
  }
  .nav__list a::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .2rem; height: 1px; background: var(--gold-deep); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
  .nav__list a:hover::after { transform: scaleX(1); }
  .hdr__logo img { width: 60px; height: 60px; }
  .hdr.is-scrolled .hdr__logo img { width: 48px; height: 48px; }
  .controls { margin-left: auto; }
}

/* =============================================================================
   Hero
   ============================================================================= */
.hero { position: relative; padding: calc(var(--hdr-h) + 1.25rem) 0 3rem; min-height: min(100svh, 920px); display: flex; align-items: center; }
.hero::before { /* velo marfil detrás del texto para que se lea sobre la piedra */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 70% at 20% 68%, rgba(246, 240, 230, .82) 0%, rgba(246, 240, 230, .5) 45%, rgba(246, 240, 230, 0) 75%),
    linear-gradient(180deg, rgba(246,240,230,.35), rgba(246,240,230,0) 30%);
}
.hero__in { position: relative; display: grid; gap: 1.5rem; }
.hero__seal img { width: 196px; height: auto; filter: drop-shadow(0 18px 26px rgba(70, 48, 12, .28)); }
.hero__brand { font-weight: 600; font-stretch: 116%; font-size: .9375rem; letter-spacing: .02em; color: var(--gold-deep); margin-bottom: .6rem; }
.hero__title {
  font-family: var(--serif); font-weight: 400; color: var(--granite);
  font-size: clamp(2.65rem, 11vw, 5.4rem); line-height: 1.02; letter-spacing: -.01em;
  max-width: 12ch; text-wrap: balance;
}
.hero__lead { margin-top: 1.25rem; max-width: 34rem; font-size: 1.125rem; line-height: 1.6; color: var(--ink); }
.hero__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.75rem; }
.hero__actions .btn { width: 100%; padding-inline: 1.1rem; }
.hero__actions .stamp > span > span { display: block; }

@media (min-width: 560px) { .hero__actions .btn { width: auto; } }
@media (min-width: 960px) {
  .hero { padding-bottom: 4rem; }
  .hero::before { background: radial-gradient(70% 85% at 24% 55%, rgba(246,240,230,.86) 0%, rgba(246,240,230,.55) 48%, rgba(246,240,230,0) 78%); }
  .hero__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 3rem; }
  .hero__seal { order: 2; justify-self: center; }
  .hero__seal img { width: min(400px, 34vw); filter: drop-shadow(0 30px 44px rgba(70, 48, 12, .3)); }
  .hero__actions .btn { white-space: nowrap; padding-inline: 1.75rem; }
}

/* Entrada orquestada del hero (una sola vez, al cargar) */
@media (prefers-reduced-motion: no-preference) {
  .hero__seal, .hero__copy > * { animation: rise .9s var(--ease) both; }
  .hero__seal { animation-name: settle; animation-duration: 1.2s; }
  .hero__copy > :nth-child(2) { animation-delay: .08s; }
  .hero__copy > :nth-child(3) { animation-delay: .16s; }
  .hero__copy > :nth-child(4) { animation-delay: .24s; }
  html.no-intro .hero__seal, html.no-intro .hero__copy > * { animation: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* =============================================================================
   Franja de confianza
   ============================================================================= */
.trust { background: var(--granite); color: var(--ivory); border-top: 1px solid var(--gold); }
.trust__list { display: grid; grid-template-columns: 1fr 1fr; }
.trust__list li {
  display: flex; align-items: center; gap: .65rem; padding: 1.1rem .25rem;
  font-size: .9375rem; font-weight: 500; font-stretch: 106%; line-height: 1.3;
}
.trust__list li:nth-child(odd) { padding-right: .9rem; }
.trust__list li:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
.trust__list svg { color: var(--gold-hi); width: 22px; height: 22px; }
@media (min-width: 900px) {
  .trust__list { grid-template-columns: repeat(4, 1fr); }
  .trust__list li { justify-content: center; padding: 1.4rem 1rem; border-top: 0 !important; }
  .trust__list li + li { border-left: 1px solid var(--line-dark); }
}

/* =============================================================================
   Secciones
   ============================================================================= */
.sec { position: relative; padding: clamp(4rem, 10vw, 7.5rem) 0; }
.sec--ivory { background: rgba(244, 238, 228, .94); }
.sec--stone { background: linear-gradient(180deg, rgba(244, 238, 228, .58), rgba(244, 238, 228, .72)); }
.sec--granite { background: var(--granite) url("../img/granite-dark-960.webp") 50% 30% / cover; color: var(--ivory); }
@media (min-width: 961px) { .sec--granite { background-image: url("../img/granite-dark-1672.webp"); } }

.sec__head { max-width: 46rem; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.sec__title {
  font-family: var(--serif); font-weight: 400; color: var(--granite);
  font-size: clamp(2.1rem, 6.4vw, 3.6rem); line-height: 1.06; letter-spacing: -.005em; text-wrap: balance;
}
.sec--granite .sec__title { color: var(--paper); }
.sec__lead { margin-top: 1rem; font-size: 1.125rem; color: var(--ink-2); max-width: 40rem; }
.sec--granite .sec__lead { color: rgba(239, 231, 218, .78); }
.sec__foot { margin-top: clamp(2.5rem, 6vw, 3.5rem); padding-top: 1.75rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.sec__foot p { font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; }
.sec__foot--center { align-items: center; border-top: 0; padding-top: 0; }
@media (min-width: 760px) { .sec__foot { flex-direction: row; align-items: center; justify-content: space-between; } }

/* Imágenes conceptuales (ambientación) */
.concept { position: relative; overflow: hidden; background: var(--granite-2); }
.concept img { width: 100%; height: 100%; object-fit: cover; }
.concept__label {
  position: absolute; right: .6rem; bottom: .6rem; padding: .2rem .55rem;
  font-size: .75rem; font-weight: 500; letter-spacing: .01em; color: rgba(247, 242, 234, .92);
  background: rgba(29, 27, 25, .55);
}

/* ---------- Servicios ---------- */
.pillars { display: grid; gap: 2.5rem; }
.pillar__img { aspect-ratio: 4 / 3; clip-path: polygon(var(--cut-lg) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-lg)); }
.pillar__body { padding-top: 1.4rem; max-width: 34rem; }
.pillar__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 5vw, 2.5rem); line-height: 1.1; margin-bottom: .6rem; color: var(--granite); }
.pillar__body p { color: var(--ink-2); font-size: 1.0625rem; }
@media (min-width: 900px) { .pillars { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }

.more-services { margin-top: clamp(3rem, 8vw, 5rem); display: grid; gap: 2rem; }
.more-services__img { aspect-ratio: 4 / 3; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%); }
.svc-list { display: grid; gap: 0; }
.svc { padding: 1.15rem 0 1.2rem 1.6rem; border-top: 1px solid var(--line); position: relative; }
.svc::before { /* pequeña escuadra a 45° */
  content: ""; position: absolute; left: 0; top: 1.5rem; width: 11px; height: 11px; background: var(--gold);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.svc h3 { font-size: 1.125rem; font-weight: 650; font-stretch: 108%; line-height: 1.3; color: var(--granite); }
.svc p { margin-top: .25rem; color: var(--ink-2); font-size: 1rem; }
@media (min-width: 900px) {
  .more-services { grid-template-columns: 5fr 7fr; align-items: center; gap: 3.5rem; }
  .svc-list { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .svc { padding-block: 1.5rem; }
}

/* ---------- Materiales ---------- */
.materials .sec__head { margin-bottom: 1.75rem; }
.slabs { margin-bottom: 2.5rem; border-top: 1px solid rgba(29, 27, 25, .5); }
.slabs li {
  font-family: var(--serif); color: var(--granite);
  font-size: clamp(2.3rem, 9vw, 4.6rem); line-height: 1.12; padding: .35em 0 .3em;
  border-bottom: 1px solid rgba(29, 27, 25, .5);
}
@media (min-width: 900px) {
  .materials { display: grid; grid-template-columns: 5fr 7fr; column-gap: 4rem; align-items: start; }
  .materials .sec__head { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--hdr-h) + 2rem); }
  .materials .slabs { grid-column: 2; grid-row: 1 / span 2; margin-bottom: 0; }
  .materials > .btn { grid-column: 1; grid-row: 2; justify-self: start; align-self: start; }
}

/* ---------- Galería de trabajos reales ---------- */
.work__tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1) 1.5rem; padding: 0 var(--gutter); border-bottom: 1px solid var(--line-dark); }
.work__tabs::-webkit-scrollbar { display: none; }
.work-tab {
  flex: none; padding: .8rem .9rem; min-height: 48px; position: relative;
  font-size: .9875rem; font-weight: 500; font-stretch: 106%; color: rgba(239, 231, 218, .66);
}
.work-tab:hover { color: var(--paper); }
.work-tab[aria-selected="true"] { color: var(--gold-hi); }
.work-tab[aria-selected="true"]::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: -1px; height: 2px; background: var(--gold-hi); }

.work__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.work-card { position: relative; }
.js .work-card[data-extra], .work-card.is-filtered { display: none; }
.work-card__link {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 5; padding: .9rem; text-decoration: none; overflow: hidden;
  background: #191715; outline-offset: -4px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.work-card__link > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work-card__stone { /* cada tarjeta muestra un fragmento distinto de la piedra oscura */
  position: absolute; inset: 0; background: url("../img/granite-dark-960.webp") 0 0 / 260% auto;
  filter: brightness(1.55) contrast(1.05);
}
.work-card__link::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(228, 198, 128, .28); }
.work-card__link:hover::before { box-shadow: inset 0 0 0 1px rgba(228, 198, 128, .6); }
.work-card:nth-child(3n+1) .work-card__stone { background-position: 12% 20%; }
.work-card:nth-child(3n+2) .work-card__stone { background-position: 70% 62%; }
.work-card:nth-child(3n)   .work-card__stone { background-position: 38% 92%; }
.work-card:nth-child(4n)   .work-card__stone { transform: scaleX(-1); }
.work-card__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,19,17,0) 52%, rgba(20,19,17,.38) 78%, rgba(20,19,17,.66) 100%); }
.work-card__link:has(> img)::after { background: linear-gradient(180deg, rgba(20,19,17,0) 66%, rgba(20,19,17,.22) 84%, rgba(20,19,17,.48) 100%); }
.work-card__play {
  position: absolute; z-index: 1; left: 50%; top: 36%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid rgba(240, 217, 157, .95); color: #fff; background: rgba(20, 19, 17, .38);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  transition: background-color .2s, border-color .2s, transform .25s var(--ease);
}
.work-card__play svg { width: 22px; height: 22px; margin-left: 3px; }
.work-card__link:hover .work-card__play { background: rgba(200, 162, 78, .55); transform: translate(-50%, -50%) scale(1.06); }
.work-card__text { position: relative; z-index: 1; display: grid; gap: .3rem; }
.work-card__title { font-size: 1.05rem; font-weight: 600; font-stretch: 106%; line-height: 1.2; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
.work-card__meta { display: flex; align-items: center; gap: .35rem; font-size: .8125rem; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.work-card__meta svg { width: 14px; height: 14px; }
.work-card--photo figure { aspect-ratio: 4 / 5; position: relative; overflow: hidden; }
.work-card--photo img { width: 100%; height: 100%; object-fit: cover; }
.work-card--photo figcaption { position: absolute; left: .8rem; bottom: .7rem; font-family: var(--serif); color: var(--paper); }

.work__more { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.link-tiktok { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; color: var(--ivory); text-decoration: none; }
.link-tiktok strong { color: var(--gold-hi); font-weight: 600; }
.link-tiktok:hover span { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); }
.work__cta { margin-top: clamp(3rem, 7vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--line-dark); display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.work__cta p { font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2; color: var(--paper); max-width: 26ch; }
@media (min-width: 720px) {
  .work-card__play { top: 42%; width: 56px; height: 56px; }
  .work__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .work__tabs { margin-inline: 0; padding-inline: 0; }
}
@media (min-width: 900px) {
  .work__cta { flex-direction: row; justify-content: space-between; align-items: center; }
  .work-card__title { font-size: 1.15rem; }
}

/* Reproductor (solo si el video tiene videoId) */
.player { width: min(420px, 92vw); max-height: 92vh; padding: 0; border: 0; background: #000; overflow: visible; }
.player::backdrop { background: rgba(14, 13, 12, .86); }
.player__frame { aspect-ratio: 9 / 16; max-height: 86vh; }
.player__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.player__close { position: absolute; top: -48px; right: 0; width: 44px; height: 44px; display: grid; place-items: center; color: var(--paper); }

/* ---------- Cómo cotizar (secuencia real: 1, 2, 3) ---------- */
.steps { display: grid; gap: 2rem; counter-reset: none; }
.step { position: relative; padding-top: 1rem; border-top: 1px solid var(--line); }
.step__n { display: block; font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: var(--gold-deep); margin-bottom: .75rem; }
.step h3 { font-size: 1.25rem; font-weight: 650; font-stretch: 106%; line-height: 1.3; color: var(--granite); }
.step p { margin-top: .4rem; color: var(--ink-2); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

/* ---------- Nosotros ---------- */
.about { display: grid; gap: 2.5rem; }
.about__text .sec__title { margin-bottom: 1.4rem; }
.about__text p { font-size: 1.125rem; line-height: 1.7; max-width: 36rem; }
.about__text p + p { margin-top: 1rem; }
.about__statement {
  font-family: var(--serif); color: var(--granite);
  font-size: clamp(1.9rem, 5.4vw, 3.1rem); line-height: 1.15; text-wrap: balance;
  padding-left: 1.4rem; border-left: 2px solid var(--gold);
}
@media (min-width: 900px) { .about { grid-template-columns: 6fr 5fr; gap: 5rem; align-items: center; } }

/* ---------- Síguenos ---------- */
.follow { display: grid; gap: 1rem; }
.follow__card {
  display: grid; gap: .45rem; padding: 1.6rem 1.5rem 1.5rem; text-decoration: none;
  background: var(--granite); color: var(--ivory);
  clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, 0 100%);
}
.follow__icon { width: 26px; height: 26px; color: var(--gold-hi); margin-bottom: .5rem; }
.follow__handle { font-family: var(--serif); font-size: clamp(1.6rem, 5vw, 2rem); line-height: 1.15; color: var(--paper); overflow-wrap: anywhere; }
.follow__role { color: rgba(239, 231, 218, .78); max-width: 30rem; }
.follow__open { margin-top: .6rem; font-weight: 600; font-stretch: 108%; color: var(--gold-hi); }
.follow__card:hover .follow__open { text-decoration: underline; text-underline-offset: 4px; }
.follow__card:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: -6px; }
.follow__ig { margin-top: 1.25rem; }
.follow__ig a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
@media (min-width: 760px) { .follow { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }

/* ---------- Zona de servicio + Visítanos ---------- */
.area { display: grid; gap: 3rem; }
.area__label { margin-top: 2rem; font-size: 1rem; font-weight: 650; font-stretch: 110%; color: var(--gold-deep); }
.area__label--minor { margin-top: 2.25rem; color: var(--ink-2); font-weight: 600; }
.cities { margin-top: .5rem; }
.cities li { font-family: var(--serif); font-size: clamp(1.75rem, 6vw, 2.4rem); line-height: 1.2; padding: .3rem 0; border-bottom: 1px solid var(--line); color: var(--granite); }
.cities--minor li { font-size: 1.35rem; color: var(--ink-2); }
.visit {
  align-self: start; padding: 1.75rem 1.5rem; background: rgba(250, 247, 241, .92);
  clip-path: polygon(var(--cut-lg) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-lg));
  display: grid; gap: .9rem;
}
.visit__title { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1.1; color: var(--granite); }
.visit__note { color: var(--ink-2); }
.visit__row { display: flex; gap: .7rem; align-items: flex-start; }
.visit__row svg { color: var(--gold-deep); margin-top: .15rem; }
.visit .btn { justify-self: start; margin-top: .35rem; }
/* Mapa: dibujo propio con las calles reales y el marcador dorado; en la web publicada
   el mapa interactivo de Google se carga encima en cuanto el visitante llega a esta parte */
.map {
  position: relative; margin-top: .5rem; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden;
  background: #EEE5D5; border: 1px solid rgba(122, 90, 28, .35);
  box-shadow: 0 14px 30px -18px rgba(40, 28, 8, .45);
}
.map__static { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.map__static:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -4px; }
.map__art { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 49% 47%; animation: map-drift 22s ease-in-out infinite alternate; }
.map__labels { font-family: var(--sans); }
@keyframes map-drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-1.2%, .8%); } }
.map__static:hover .map__art { animation-play-state: paused; }

.map__pin { position: absolute; width: 0; height: 0; z-index: 2; }
.map__drop {
  position: absolute; left: -19px; top: -50px; width: 38px; height: 50px; max-width: none; overflow: visible;
  filter: drop-shadow(0 6px 6px rgba(40, 26, 4, .35));
  animation: pin-bob 2.6s ease-in-out infinite; transform-origin: 50% 100%;
}
.map__ring {
  position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid rgba(200, 162, 78, .9); background: rgba(228, 198, 128, .18);
  transform: scale(.3); opacity: 0; animation: pin-ring 2.6s ease-out infinite;
}
.map__ring--b { animation-delay: 1.3s; }
@keyframes pin-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pin-ring { 0% { transform: scale(.3); opacity: .9; } 80%, 100% { transform: scale(1.9); opacity: 0; } }

.map__card {
  position: absolute; z-index: 3; left: .75rem; top: .75rem; max-width: calc(100% - 1.5rem);
  display: grid; gap: .1rem; padding: .55rem .8rem; background: rgba(250, 247, 241, .95);
  box-shadow: 0 4px 14px rgba(40, 28, 8, .15); border-left: 3px solid var(--gold);
}
.map__card strong { font-size: .875rem; font-weight: 700; font-stretch: 106%; color: var(--granite); line-height: 1.25; }
.map__card small { font-size: .75rem; color: var(--ink-2); }
.map__open {
  position: absolute; z-index: 3; right: .75rem; bottom: .75rem;
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .5rem .85rem;
  background: var(--granite); color: var(--paper); font-size: .875rem; font-weight: 600; font-stretch: 106%;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: background-color .2s;
}
.map__open svg { width: 16px; height: 16px; color: var(--gold-hi); }
.map__static:hover .map__open { background: #000; }
.map__credit { position: absolute; z-index: 3; left: .5rem; bottom: .35rem; font-size: .625rem; color: rgba(87, 81, 74, .8); }
.map iframe { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .6s ease; }
.map.is-live iframe { opacity: 1; }
@media (max-width: 420px) { .map { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .map__art, .map__drop, .map__ring { animation: none; } .map__ring { opacity: 0; } }
.reviews { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding-top: .5rem; }
.reviews__title { display: flex; align-items: center; gap: .5rem; width: 100%; font-weight: 600; }
@media (min-width: 900px) { .area { grid-template-columns: 6fr 5fr; gap: 4.5rem; } }

/* ---------- Cierre ---------- */
.closing {
  position: relative; padding: clamp(4.5rem, 12vw, 8rem) 0; text-align: center; color: var(--ivory);
  background: var(--granite) url("../img/granite-dark-960.webp") 50% 70% / cover;
  clip-path: polygon(0 clamp(28px, 6vw, 64px), clamp(28px, 6vw, 64px) 0, 100% 0, 100% 100%, 0 100%);
  margin-top: -1px;
}
@media (min-width: 961px) { .closing { background-image: url("../img/granite-dark-1672.webp"); } }
.closing__in { display: grid; justify-items: center; gap: 1.25rem; }
.closing__title { font-family: var(--serif); font-weight: 400; color: var(--gold-hi); font-size: clamp(2.8rem, 11vw, 6rem); line-height: 1; letter-spacing: -.01em; }
.closing p { font-size: 1.1875rem; max-width: 32rem; color: rgba(239, 231, 218, .85); margin-bottom: .75rem; }

/* ---------- Pie ---------- */
.ftr { background: #161513; color: rgba(239, 231, 218, .82); padding: 3.5rem 0 calc(6rem + env(safe-area-inset-bottom)); font-size: .975rem; }
.ftr__in { display: grid; gap: 2.5rem; }
.ftr__brand { display: flex; gap: 1rem; align-items: center; }
.ftr__brand img { width: 84px; height: 84px; }
.ftr__name { font-family: var(--serif); font-size: 1.35rem; color: var(--paper); line-height: 1.2; }
.ftr__slogan { color: var(--gold-hi); margin-top: .2rem; }
.ftr__slogan--es { color: rgba(239, 231, 218, .62); margin-top: 0; font-size: .9rem; }
.ftr__h { font-size: .9375rem; font-weight: 650; font-stretch: 112%; color: var(--gold-hi); margin-bottom: .8rem; }
.ftr__list li a, .ftr__list li > span { display: flex; align-items: flex-start; gap: .6rem; padding: .4rem 0; text-decoration: none; overflow-wrap: anywhere; }
.ftr__list a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.ftr__list svg { width: 18px; height: 18px; margin-top: .2rem; color: var(--gold); }
.ftr__list small { display: block; color: rgba(239, 231, 218, .55); font-size: .8125rem; }
.ftr__contact { display: inline-block; margin-top: 1rem; color: var(--paper); text-underline-offset: 4px; text-decoration-color: var(--gold); }
.ftr__legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(239, 231, 218, .12); font-size: .8125rem; color: rgba(239, 231, 218, .5); }
@media (min-width: 900px) { .ftr__in { grid-template-columns: 5fr 4fr 3fr; } .ftr { padding-bottom: 3rem; } }

/* ---------- WhatsApp flotante: símbolo dorado, sin fondo, con pulso y destellos ---------- */
.wa-float {
  position: fixed; z-index: 30;
  right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--ease), opacity .3s;
}
.wa-float:hover { transform: scale(1.12); }
.wa-float:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }
.wa-float__icon {
  position: relative; z-index: 2; width: 58px; height: 58px; overflow: visible;
  filter: drop-shadow(0 0 1px rgba(70, 46, 8, .85)) drop-shadow(0 3px 5px rgba(40, 26, 4, .5)) drop-shadow(0 0 12px rgba(228, 198, 128, .55));
  animation: wa-breathe 3.2s ease-in-out infinite;
}
/* pulso dorado: anillo que se expande y se desvanece */
.wa-float::before, .wa-float::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; z-index: 0; opacity: 0;
  border: 2px solid rgba(228, 198, 128, .85);
  animation: wa-pulse 3.2s ease-out infinite;
}
.wa-float::after { animation-delay: 1.1s; border-width: 1.5px; }
/* halo cálido ocasional */
.wa-float__halo {
  position: absolute; inset: -14px; border-radius: 50%; z-index: 0; opacity: 0;
  background: radial-gradient(circle, rgba(240, 213, 142, .55) 0%, rgba(228, 198, 128, .18) 45%, rgba(228, 198, 128, 0) 70%);
  animation: wa-halo 6.4s ease-in-out infinite;
}
/* destellos: estrellas finas de cuatro puntas que aparecen y se apagan */
.wa-float__spark {
  position: absolute; z-index: 3; width: 20px; height: 20px; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 0 3px rgba(240, 213, 142, .9));
  background: radial-gradient(circle, #fff 0 18%, #FBEFC8 30%, rgba(240, 213, 142, 0) 70%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  animation: wa-spark 4.5s ease-in-out infinite;
}
.wa-float__spark--a { top: -2px; right: 0; }
.wa-float__spark--b { bottom: 6px; left: -2px; width: 15px; height: 15px; animation-delay: 1.4s; }
.wa-float__spark--c { top: 12px; left: -4px; width: 12px; height: 12px; animation-delay: 2.9s; }
@keyframes wa-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes wa-pulse { 0% { transform: scale(.95); opacity: .85; } 60% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes wa-halo { 0%, 40%, 100% { opacity: 0; } 60% { opacity: 1; } }
@keyframes wa-spark {
  0%, 22%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  30% { opacity: 1; transform: scale(1.15) rotate(45deg); }
  40% { opacity: 0; transform: scale(.3) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float__icon, .wa-float::before, .wa-float::after, .wa-float__halo, .wa-float__spark { animation: none; }
  .wa-float__shine { display: none; }
}
html.menu-open .wa-float { opacity: 0; pointer-events: none; }

/* =============================================================================
   Landing de contactos (/contacto)
   ============================================================================= */
[data-route="contact"] .hdr--slim, [data-route="404"] .hdr--slim { position: absolute; background: none; box-shadow: none; }
.hdr--slim .hdr__logo img { width: 44px; height: 44px; }

.card { width: 100%; max-width: 30rem; margin: 0 auto; padding: calc(var(--hdr-h) + .25rem) var(--gutter) calc(2.5rem + env(safe-area-inset-bottom)); display: grid; gap: 1.1rem; }
.card__id { text-align: center; display: grid; justify-items: center; padding: .25rem 0 .5rem; }
.card__seal { width: 176px; height: 176px; filter: drop-shadow(0 16px 24px rgba(70, 48, 12, .28)); }
.card__name { margin-top: 1rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 7.5vw, 2.1rem); line-height: 1.12; color: var(--granite); text-wrap: balance; }
.card__slogan { margin-top: .45rem; font-weight: 600; font-stretch: 112%; color: var(--gold-deep); }
.card__slogan-es { color: var(--ink-2); font-size: .975rem; }
.card__id .stamp { margin-top: 1rem; }
.card__wa { margin-top: .25rem; }

.quick { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.quick__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
  min-height: 84px; padding: .8rem .5rem; text-decoration: none; text-align: center;
  background: rgba(250, 247, 241, .9); color: var(--granite);
  font-weight: 600; font-stretch: 106%; font-size: .9375rem; line-height: 1.2;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background-color .2s;
}
.quick__btn svg { width: 24px; height: 24px; color: var(--gold-deep); }
.quick__btn:hover { background: #fff; }
.quick__btn:focus-visible { outline-offset: -6px; }

.info, .social { background: rgba(250, 247, 241, .9); padding: 1.1rem 1.25rem 1.25rem; }
.info__row { display: grid; gap: .1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.info__row:first-child { padding-top: .25rem; }
.info__row dt { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; font-stretch: 108%; color: var(--gold-deep); }
.info__row dt svg { width: 16px; height: 16px; }
.info__row dd { font-size: 1rem; color: var(--ink); overflow-wrap: anywhere; }
.info__row dd small { color: var(--ink-2); font-size: .875rem; }
.info__row a { text-decoration-color: rgba(122, 90, 28, .45); text-underline-offset: 3px; }
.map--card { margin-top: 1rem; }

.social__title { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--granite); margin-bottom: .35rem; }
.social__row { display: flex; align-items: center; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--line); text-decoration: none; min-height: 56px; }
.social__list li:last-child .social__row { border-bottom: 0; padding-bottom: .2rem; }
.social__row svg { width: 26px; height: 26px; color: var(--granite); }
.social__row span { display: grid; }
.social__row strong { font-weight: 650; overflow-wrap: anywhere; }
.social__row small { color: var(--ink-2); font-size: .875rem; }
.social__row:hover strong { text-decoration: underline; text-underline-offset: 3px; }

.web-link {
  display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.25rem; text-decoration: none;
  background: var(--granite); color: var(--ivory);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-lg)), calc(100% - var(--cut-lg)) 100%, 0 100%);
}
.web-link svg { width: 26px; height: 26px; color: var(--gold-hi); }
.web-link span { display: grid; }
.web-link strong { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--paper); }
.web-link small { color: rgba(239, 231, 218, .7); }
.web-link:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: -6px; }
.card__legal { text-align: center; font-size: .8125rem; color: var(--ink-2); margin-top: .5rem; }

@media (min-width: 720px) {
  [data-route="contact"] .card { padding-top: calc(var(--hdr-h) + 1.5rem); }
}

/* 404 */
.card--404 { min-height: 100svh; align-content: center; justify-items: center; text-align: center; padding-top: 2rem; }
.card__text { color: var(--ink-2); margin-bottom: .5rem; }

/* Transición al cambiar entre la web y la landing (sin recargar) */
#app { transition: opacity .22s ease; }
#app.is-leaving { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #app { transition: none; } }

/* =============================================================================
   Bienvenida de la web: el toque en "Entrar" activa la música
   ============================================================================= */
.welcome { display: none; }
html.show-welcome { overflow: hidden; }
html.show-welcome .welcome {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; text-align: center;
  padding: calc(2rem + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(2rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: radial-gradient(70% 60% at 50% 45%, rgba(247, 242, 234, .72) 0%, rgba(247, 242, 234, .35) 70%, rgba(247, 242, 234, .2) 100%), url("../img/marble-960.webp") 58% 50% / cover #EDE4D6;
  transition: opacity .7s ease, visibility 0s;
}
html.welcome-leaving .welcome { opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; }
.welcome__in { display: grid; justify-items: center; gap: .6rem; max-width: 26rem; }
.welcome__seal { width: min(240px, 58vw); height: auto; filter: drop-shadow(0 22px 34px rgba(70, 48, 12, .32)); animation: settle 1.4s var(--ease) both; }
.welcome__name { margin-top: .6rem; font-family: var(--serif); font-size: clamp(1.7rem, 7vw, 2.3rem); line-height: 1.1; color: var(--granite); }
.welcome__slogan { font-weight: 600; font-stretch: 112%; color: var(--gold-deep); }
.welcome__enter { margin-top: 1.4rem; min-width: 220px; position: relative; overflow: hidden; animation: cta-glow 2.8s ease-in-out infinite; }
.welcome__note { display: flex; align-items: center; gap: .55rem; margin-top: .5rem; font-size: .9rem; color: var(--ink-2); }
.sound__bars--on i { background: var(--gold-deep); opacity: 1; animation: eq 1.6s ease-in-out infinite; }
.sound__bars--on i:nth-child(2) { animation-delay: -.5s; }
.sound__bars--on i:nth-child(3) { animation-delay: -1.1s; }
.sound__bars--on i:nth-child(4) { animation-delay: -.8s; }
@keyframes cta-glow { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(200, 162, 78, 0)); } 50% { filter: brightness(1.08) drop-shadow(0 0 14px rgba(200, 162, 78, .55)); } }

/* =============================================================================
   Landing en dos pantallas
   ============================================================================= */
#app[data-screen="intro"] .card { display: none; }
#app[data-screen="contact"] .intro { display: none; }
#app[data-screen] [data-screen] { animation: screen-in .55s var(--ease) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.intro { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: calc(var(--hdr-h) + .5rem) var(--gutter) calc(2.5rem + env(safe-area-inset-bottom, 0px)); }
.intro__in { width: 100%; max-width: 30rem; display: grid; justify-items: center; text-align: center; }
.intro__seal { width: min(210px, 54vw); height: auto; filter: drop-shadow(0 20px 30px rgba(70, 48, 12, .3)); }
.intro__name { margin-top: 1.1rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 8vw, 2.5rem); line-height: 1.08; color: var(--granite); text-wrap: balance; }
.intro__slogan { margin-top: .5rem; display: grid; gap: .1rem; font-weight: 600; font-stretch: 112%; color: var(--gold-deep); }
.intro__slogan span { font-weight: 400; font-stretch: 100%; color: var(--ink-2); font-size: .95rem; }
.intro__lead { margin-top: 1.4rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ink); padding: 1.1rem 1.2rem; background: rgba(250, 247, 241, .82); border-top: 1px solid rgba(200, 162, 78, .7); border-bottom: 1px solid rgba(200, 162, 78, .7); }
.intro__points { margin-top: 1.25rem; display: grid; gap: .55rem; }
.intro__points li { display: flex; align-items: center; justify-content: center; gap: .6rem; font-weight: 600; font-stretch: 106%; color: var(--granite); }
.intro__points li::before { content: ""; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); flex: none; }
.intro__story { margin-top: 1.25rem; font-family: var(--serif); font-size: 1.2rem; line-height: 1.45; color: var(--granite); text-wrap: balance; }
.intro__cta { margin-top: 1.75rem; position: relative; overflow: hidden; animation: cta-glow 2.8s ease-in-out infinite; }
.intro__cta::after, .welcome__enter::after { /* destello que recorre el botón */
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0));
  animation: btn-shine 3.6s ease-in-out 1.2s infinite;
}
@keyframes btn-shine { 0% { left: -40%; } 35%, 100% { left: 130%; } }
.intro__free { margin-top: 1rem; }

.card__back { justify-self: start; display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; color: var(--ink-2); font-weight: 600; text-decoration: none; }
.card__back span:first-child { font-size: 1.5rem; line-height: 1; }
.card__back:hover { color: var(--granite); }
#app:not([data-screen]) .card__back { display: none; }

/* Tarjeta hacia la página web: elegante y con brillo */
.web-card {
  position: relative; overflow: hidden; display: grid; text-decoration: none; color: var(--ivory);
  background: var(--granite) url("../img/granite-dark-960.webp") 50% 40% / cover;
  border: 1px solid rgba(228, 198, 128, .75);
  box-shadow: 0 18px 36px -18px rgba(20, 14, 4, .6), inset 0 0 0 4px rgba(29, 27, 25, .9), inset 0 0 0 5px rgba(228, 198, 128, .35);
  clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
}
.web-card__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 10px 10px 0; }
.web-card__thumbs img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
.web-card__thumbs img:first-child { clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
.web-card__body { display: grid; gap: .35rem; padding: 1.1rem 1.25rem 1.35rem; }
.web-card__kicker { font-size: .8125rem; font-weight: 600; font-stretch: 112%; color: var(--gold-hi); }
.web-card__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 7vw, 2rem); line-height: 1.1; color: var(--paper); }
.web-card__text { color: rgba(239, 231, 218, .8); }
.web-card__go {
  justify-self: start; margin-top: .65rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .7rem 1.1rem;
  background: var(--brushed); color: var(--granite); font-weight: 700; font-stretch: 108%;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.web-card__go svg { width: 18px; height: 18px; }
.web-card__shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255, 240, 200, .22) 50%, rgba(255,255,255,0) 65%); background-size: 250% 100%; animation: card-shine 6s ease-in-out infinite; }
@keyframes card-shine { 0% { background-position: 130% 0; } 45%, 100% { background-position: -130% 0; } }
.web-card:hover .web-card__go { filter: brightness(1.07); }
.web-card:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: -8px; }

@media (prefers-reduced-motion: reduce) {
  .welcome__seal, .welcome__enter, .intro__cta, .sound__bars--on i, #app[data-screen] [data-screen] { animation: none; }
  .intro__cta::after, .welcome__enter::after, .web-card__shine { display: none; }
}
@media (min-width: 961px) { html.show-welcome .welcome { background-image: radial-gradient(60% 60% at 50% 45%, rgba(247, 242, 234, .72) 0%, rgba(247, 242, 234, .35) 70%, rgba(247, 242, 234, .2) 100%), url("../img/marble-1672.webp"); } }
.welcome__name { white-space: nowrap; }
@media (max-width: 380px) { .welcome__name { white-space: normal; } }
/* presentación de la landing: texto en un solo panel legible */
.intro__panel { margin-top: 1.4rem; width: 100%; padding: 1.2rem 1.25rem 1.3rem; background: rgba(250, 247, 241, .9); border-top: 1px solid rgba(200, 162, 78, .75); border-bottom: 1px solid rgba(200, 162, 78, .75); box-shadow: 0 14px 30px -20px rgba(40, 28, 8, .4); }
.intro__panel .intro__lead { margin: 0; padding: 0; background: none; border: 0; }
.intro__panel .intro__points { margin: 1.1rem auto 0; display: inline-grid; justify-items: start; text-align: left; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); width: 100%; }
.intro__panel .intro__points li { justify-content: flex-start; align-items: baseline; }
.intro__panel .intro__points li::before { transform: translateY(-1px) rotate(45deg); }
.intro__panel .intro__story { margin-top: 1rem; }

/* =============================================================================
   Landing · pantalla de contactos: íconos con enlace directo
   ============================================================================= */
.contacts { display: grid; gap: .9rem; }
.contacts__title { text-align: center; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: var(--granite); }
.contacts__title::after { content: ""; display: block; width: 44px; height: 1px; margin: .55rem auto 0; background: var(--gold); }
.contacts__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.ctile {
  height: 100%; display: grid; justify-items: center; align-content: start; gap: .35rem; padding: 1.1rem .6rem 1rem;
  text-align: center; text-decoration: none; color: var(--granite);
  background: rgba(250, 247, 241, .92); border: 1px solid rgba(200, 162, 78, .38);
  box-shadow: 0 10px 22px -18px rgba(40, 28, 8, .55);
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.ctile:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 16px 26px -18px rgba(40, 28, 8, .6); }
.ctile:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.ctile__icon {
  position: relative; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; margin-bottom: .25rem;
  background: radial-gradient(circle at 35% 30%, #FFFDF8 0%, #F3EBDD 70%);
  box-shadow: 0 0 0 1.5px rgba(200, 162, 78, .85), 0 0 0 5px rgba(250, 247, 241, .9), 0 0 0 6px rgba(200, 162, 78, .35), 0 8px 16px -8px rgba(70, 48, 12, .45);
  transition: background .3s, color .3s;
}
.ctile__icon svg { width: 25px; height: 25px; color: var(--granite); transition: color .3s; }
.ctile:hover .ctile__icon { background: var(--brushed); }
.ctile__label { font-weight: 700; font-stretch: 108%; font-size: 1rem; }
.ctile__info { display: grid; gap: .1rem; font-size: .8125rem; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
.ctile__info small { font-size: .75rem; color: var(--gold-deep); font-weight: 600; }
/* WhatsApp, el canal principal: tarjeta destacada de ancho completo */
.contacts__grid li:first-child { grid-column: 1 / -1; }
.ctile--main {
  grid-template-columns: auto 1fr; justify-items: start; align-items: center; column-gap: 1rem; row-gap: .1rem; text-align: left;
  padding: 1rem 1.2rem; background: var(--granite) url("../img/granite-dark-960.webp") 50% 50% / cover; color: var(--paper);
  border-color: rgba(228, 198, 128, .7);
}
.ctile--main .ctile__icon { grid-row: span 2; margin: 0; background: var(--brushed); box-shadow: 0 0 0 1.5px rgba(240, 217, 157, .9), 0 0 0 5px rgba(29, 27, 25, .8), 0 0 0 6px rgba(228, 198, 128, .45); animation: cta-glow 2.8s ease-in-out infinite; }
.ctile--main .ctile__icon svg { color: var(--granite); }
.ctile--main .ctile__label { font-size: 1.15rem; color: var(--paper); align-self: end; }
.ctile--main .ctile__info { color: var(--gold-hi); font-size: .95rem; align-self: start; }
.ctile--main:hover .ctile__icon { filter: brightness(1.08); }

.where { display: grid; gap: .55rem; background: rgba(250, 247, 241, .9); padding: .9rem .9rem 1rem; border: 1px solid rgba(200, 162, 78, .3); }
.where .map { margin-top: 0; }
.where__row { display: flex; gap: .6rem; align-items: flex-start; font-size: .9375rem; color: var(--ink); padding: 0 .2rem; }
.where__row svg { width: 18px; height: 18px; color: var(--gold-deep); margin-top: .15rem; }
@media (prefers-reduced-motion: reduce) { .ctile--main .ctile__icon { animation: none; } }
.ctile__info--mail { font-size: .75rem; overflow-wrap: normal; word-break: normal; }
.contacts__grid li.ctile-wide { grid-column: 1 / -1; }
.ctile--row { grid-template-columns: auto 1fr; justify-items: start; align-items: center; column-gap: 1rem; row-gap: .1rem; text-align: left; padding: .9rem 1.2rem; }
.ctile--row .ctile__icon { grid-row: span 2; margin: 0; }
.ctile--row .ctile__label { align-self: end; }
.ctile--row .ctile__info { align-self: start; }

/* Contactos compactos, con el mismo corte a 45° de los botones de la web */
.contacts__wa { margin-top: .2rem; }
.contacts__wa svg { color: var(--granite); }
.contacts__tags { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.ctag {
  --c: 10px;
  height: 100%; display: grid; justify-items: center; align-content: start; gap: .2rem; padding: .75rem .5rem .7rem;
  text-align: center; text-decoration: none; color: var(--granite);
  background: linear-gradient(rgba(250, 247, 241, .96), rgba(250, 247, 241, .96)) padding-box, var(--brushed) border-box;
  border: 1px solid transparent;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: filter .2s, transform .2s var(--ease);
}
.ctag:hover { filter: brightness(1.03); transform: translateY(-1px); }
.ctag:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -5px; }
.ctag__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--granite); margin-bottom: .15rem; }
.ctag__icon svg { width: 17px; height: 17px; color: var(--gold-hi); }
.ctag__label { font-weight: 700; font-stretch: 108%; font-size: .9rem; line-height: 1.2; }
.ctag__info { display: grid; gap: .05rem; font-size: .72rem; line-height: 1.3; color: var(--ink-2); }
.ctag__info small { font-size: .68rem; font-weight: 600; color: var(--gold-deep); }

/* =============================================================================
   Sol de ventana: reflejo de la ventana, rayos de luz y polvo flotando
   (por encima del mármol y por debajo del contenido)
   ============================================================================= */
.sun { position: absolute; inset: 0; overflow: hidden; }
/* la habitación un poco en sombra para que el sol de la ventana se note */
.sun::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 18% 18%, rgba(60, 40, 12, 0) 0%, rgba(60, 40, 12, .06) 45%, rgba(60, 40, 12, 0) 70%),
    linear-gradient(122deg, rgba(58, 40, 14, .04) 0%, rgba(58, 40, 14, .12) 35%, rgba(52, 36, 12, .24) 70%, rgba(44, 30, 10, .34) 100%);
}
.sun__window {
  position: absolute; top: -6%; left: -8%; width: min(70vw, 900px); height: min(78vh, 760px);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: clamp(10px, 1.6vw, 22px);
  transform: perspective(900px) rotateY(18deg) rotate(-14deg) skewX(-8deg); transform-origin: 0 0;
  filter: blur(5px); opacity: .6;
  animation: sun-window 24s ease-in-out infinite alternate;
}
.sun__window i { background: radial-gradient(130% 130% at 25% 15%, rgba(255, 248, 226, .95) 0%, rgba(255, 236, 190, .75) 50%, rgba(255, 230, 176, .25) 100%); }
/* el marco de la ventana proyecta su sombra: los travesaños quedan oscuros entre los cristales */
.sun__window { gap: clamp(14px, 2.2vw, 30px); }
.sun__window::after { content: ""; position: absolute; inset: -6%; z-index: -1; background: rgba(50, 34, 10, .1); filter: blur(10px); }
.sun__shafts {
  position: absolute; top: -40%; left: -25%; width: 95%; height: 190%;
  transform: rotate(-32deg); transform-origin: 30% 0;
  background:
    linear-gradient(90deg,
      transparent 0 6%, rgba(255, 244, 214, .55) 6% 13%, transparent 13% 19%,
      rgba(255, 246, 222, .35) 19% 22%, transparent 22% 30%,
      rgba(255, 242, 208, .6) 30% 41%, transparent 41% 47%,
      rgba(255, 246, 222, .3) 47% 50%, transparent 50% 58%,
      rgba(255, 242, 208, .45) 58% 66%, transparent 66% 100%);
  -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.65) 40%, transparent 78%);
          mask: linear-gradient(180deg, #000 0%, rgba(0,0,0,.65) 40%, transparent 78%);
  filter: blur(14px); opacity: .55;
  animation: sun-shafts 16s ease-in-out infinite alternate;
}
.sun__dust { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes sun-window { from { opacity: .55; translate: 0 0; } to { opacity: .8; translate: 2vw 1.5vh; } }
@keyframes sun-shafts { 0% { opacity: .45; translate: 0 0; } 50% { opacity: .85; } 100% { opacity: .55; translate: 4% 0; } }
html.is-hidden .sun__window, html.is-hidden .sun__shafts { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .sun__window, .sun__shafts { animation: none; } .sun__dust { display: none; } }

/* =============================================================================
   Tarjetas que respiran (brillo dorado en el borde) y reflejo de luz que pasa
   ============================================================================= */
.lux { overflow: hidden; animation: lux-breathe 5s ease-in-out infinite; animation-delay: var(--bd, 0s); }
@keyframes lux-breathe {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(200, 162, 78, .35), inset 0 0 0 0 rgba(228, 198, 128, 0); }
  50% { box-shadow: inset 0 0 0 1.5px rgba(214, 176, 90, .95), inset 0 0 26px 0 rgba(228, 198, 128, .38); }
}
.lux:hover { animation-duration: 1.6s; }
.sheen {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(110deg, rgba(255, 250, 235, 0) 30%, rgba(255, 246, 222, .55) 47%, rgba(255, 255, 255, .75) 50%, rgba(255, 246, 222, .55) 53%, rgba(255, 250, 235, 0) 70%);
  background-size: 260% 100%; background-repeat: no-repeat; background-position: 160% 0;
  mix-blend-mode: soft-light;
  animation: lux-sheen 9s ease-in-out infinite; animation-delay: var(--sd, 0s);
}
.ctag .sheen, .intro__panel .sheen, .where .sheen, .visit .sheen { mix-blend-mode: normal; opacity: .55; }
@keyframes lux-sheen { 0% { background-position: 160% 0; } 22%, 100% { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .lux { animation: none; } .sheen { display: none; } }

/* =============================================================================
   Refinamiento: tarjetas de contacto como placas de showroom
   ============================================================================= */
.ctag {
  position: relative; overflow: hidden; clip-path: none; border-radius: 10px;
  gap: .45rem; padding: 1.25rem .85rem 1.15rem;
  background: rgba(251, 248, 242, .8);
  border: 1px solid rgba(201, 174, 124, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 1px 2px rgba(50, 34, 10, .06), 0 8px 18px -14px rgba(50, 34, 10, .38);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.ctag:hover { filter: none; }
.ctag__icon {
  width: 42px; height: 42px; margin-bottom: .3rem; border-radius: 50%;
  background: rgba(255, 253, 248, .6); border: 1px solid rgba(169, 128, 44, .4);
}
.ctag__icon svg { width: 18px; height: 18px; color: #2E2A25; }
.ctag__label { font-size: .95rem; font-weight: 700; letter-spacing: .01em; color: #24211D; }
.ctag__info { gap: .2rem; font-size: .74rem; color: #5E574F; }
.ctag__info small { font-size: .68rem; font-weight: 600; letter-spacing: .02em; color: #8C6A2A; }
/* línea dorada fina que recorre el borde al pasar el cursor */
.ctag::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(110deg, rgba(232, 206, 140, 0) 35%, rgba(232, 206, 140, .95) 50%, rgba(232, 206, 140, 0) 65%) 200% 0 / 260% 100% no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .3s;
}
@media (hover: hover) {
  .ctag:hover {
    transform: translateY(-2px); border-color: rgba(201, 174, 124, .85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 2px 4px rgba(50, 34, 10, .07), 0 14px 24px -14px rgba(50, 34, 10, .45);
  }
  .ctag:hover::before { opacity: 1; animation: ctag-line 1.3s var(--ease) forwards; }
}
@keyframes ctag-line { from { background-position: 200% 0; } to { background-position: -60% 0; } }
/* diferencias sutiles por tarjeta (orden: Gmail, Google Maps, TikTok portafolio, TikTok promociones) */
.contacts__tags li:nth-child(2) .ctag { background: radial-gradient(90% 70% at 50% 0%, rgba(201, 174, 124, .14), rgba(201, 174, 124, 0) 70%), rgba(251, 248, 242, .8); }
.contacts__tags li:nth-child(2) .ctag__icon svg { color: #8C6A2A; }
.contacts__tags li:nth-child(3) .ctag { background: linear-gradient(rgba(251, 248, 242, .86), rgba(251, 248, 242, .86)), url("../img/marble-960.webp") 30% 40% / 260% auto; }
.contacts__tags li:nth-child(4) .ctag__icon { border-color: rgba(169, 128, 44, .55); }
@media (prefers-reduced-motion: reduce) { .ctag, .ctag:hover { transform: none; } .ctag:hover::before { animation: none; } }

/* =============================================================================
   Refinamiento: tarjeta informativa como placa editorial de mármol claro
   ============================================================================= */
.intro__panel {
  margin-top: 1.6rem; padding: 1.7rem 1.5rem 1.8rem; border-radius: 10px;
  background: rgba(251, 248, 242, .82);
  border: 1px solid rgba(201, 174, 124, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 1px 2px rgba(50, 34, 10, .05), 0 12px 26px -18px rgba(50, 34, 10, .4);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.intro__panel .intro__lead { font-size: 1.0625rem; line-height: 1.72; color: #2A2622; }
.intro__panel .intro__points { margin-top: 1.4rem; padding: 1.25rem 0; gap: .75rem; border-top: 1px solid rgba(36, 33, 29, .08); border-bottom: 1px solid rgba(36, 33, 29, .08); }
.intro__panel .intro__points li { gap: .7rem; font-weight: 500; font-size: 1rem; color: #24211D; }
.intro__panel .intro__points li::before { width: 6px; height: 6px; background: #C9AE7C; }
.intro__panel .intro__story { margin-top: 1.4rem; font-size: 1.18rem; line-height: 1.5; color: #24211D; }

/* "Estimados gratis": el sello del logo, pequeño y translúcido */
.stamp__mark {
  width: 30px; height: 30px; flex: none; clip-path: none;
  background: url("../img/logo-128.webp") center / contain no-repeat;
  opacity: .72; filter: saturate(.9) drop-shadow(0 1px 1px rgba(60, 40, 10, .12));
}

/* partículas de la web: por encima de las secciones, sin bloquear clics */
.dust-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero__in { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .dust-overlay { display: none; } }

/* ---------- Aviso de música (visible hasta que el visitante toca la página) ---------- */
.music-invite {
  position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: .7rem; padding: .62rem 1rem .62rem .8rem;
  border: 1px solid rgba(228,198,128,.55); border-radius: 999px; cursor: pointer;
  background: rgba(29,27,25,.88); color: var(--paper); text-align: left;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(20,14,6,.28), inset 0 1px 0 rgba(255,240,205,.12);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
html.audio-waiting.invite-ready .music-invite { opacity: 1; transform: none; pointer-events: auto; animation: invite-breathe 3.2s ease-in-out 1.2s infinite; }
.music-invite__bars { display: flex; align-items: flex-end; gap: 2.5px; height: 18px; }
.music-invite__bars i { display: block; width: 3px; height: 6px; border-radius: 1px; background: var(--gold-hi); animation: eq 1.4s ease-in-out infinite; }
.music-invite__bars i:nth-child(2) { animation-delay: -.45s; }
.music-invite__bars i:nth-child(3) { animation-delay: -.95s; }
.music-invite__bars i:nth-child(4) { animation-delay: -.7s; }
.music-invite__txt { display: flex; flex-direction: column; line-height: 1.15; }
.music-invite__txt strong { font-size: .875rem; font-weight: 600; letter-spacing: .01em; }
.music-invite__txt small { font-size: .78rem; color: var(--gold-hi); }
.music-invite:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@keyframes invite-breathe { 0%,100% { box-shadow: 0 10px 28px rgba(20,14,6,.28), 0 0 0 0 rgba(228,198,128,0); } 50% { box-shadow: 0 10px 28px rgba(20,14,6,.28), 0 0 0 6px rgba(228,198,128,.16); } }
@media (prefers-reduced-motion: reduce) { .music-invite__bars i, html.audio-waiting.invite-ready .music-invite { animation: none; } }