/* ==========================================================================
   De la Antigua Vida — hoja de estilos única
   Dirección C1 · filete pleno. Paleta extraída del logo.
   ========================================================================== */

:root {
  /* --- color --- */
  --v900: #1a0c22;   /* fondo general */
  --v850: #20102a;   /* bandas alternas */
  --v800: #271234;   /* paneles y fichas */
  --v700: #33193f;   /* bordes suaves */
  --v600: #452a52;   /* bordes marcados */
  --oro:    #d8a860;
  --oro-lt: #f0d8a8;
  --oro-dk: #a87830;
  --crema:  #f4e7cf;
  --lav:    #b39fc4; /* texto secundario */
  --lav-lt: #d5c3dd; /* texto sobre fondo oscuro, un punto más claro */
  --wa:     #25a866;
  --wa-dk:  #1d8b53;

  /* --- ornamento «chapa y filete» ---------------------------------------
     Paleta sacada del propio logo: volutas de oro, petalos lilas, hojas
     gris-lavanda. Solo --orn-malva es un valor nuevo; el resto reusa los
     tokens de arriba. --orn-det apaga hojas y brotes en mobile: el
     ornamento no se achica, se SIMPLIFICA. */
  --orn-oro:       var(--oro);
  --orn-oro-lt:    var(--oro-lt);
  --orn-oro-dk:    var(--oro-dk);
  --orn-malva:     #7b4a8c;   /* la linea que acompana al filete dorado */
  --orn-petalo:    #8f7ba8;
  --orn-petalo-lt: #b6a6c9;
  --orn-petalo-dk: #5f4a78;
  --orn-hoja:      #b9b4cb;
  --orn-hoja-lt:   #dcd8e6;
  --orn-hoja-dk:   #8d87a3;
  --orn-det: 1;

  /* --- ornamento · intensidad y superficie ------------------------------- */
  --fil-oro-rgb: 216, 168, 96;   /* el oro en canales sueltos, para graduar alfa */
  --sup: var(--v800);            /* superficie que recorta la placa del filete */

  /* --- sombras y tiempos ------------------------------------------------- */
  --sh-2: 0 10px 26px rgba(0, 0, 0, .34);
  --sh-3: 0 16px 36px rgba(0, 0, 0, .42);
  --ease:  cubic-bezier(.2, .7, .3, 1);
  --dur-1: 180ms;   /* interfaz: botones, enlaces, foco */
  --dur-2: 260ms;   /* ornamento: filetes, esquinas, cintas */
  --dur-3: 750ms;   /* destello especular de la ficha */

  /* Tema claro (secciones que alternan con fondo crema). Las tarjetas y
     piezas internas SIGUEN siendo violetas: solo cambia el fondo y el texto
     "de chrome" de la sección (títulos, bajadas, filete, botón "ver más"). */
  --claro-bg:  #f4e7cf;
  --claro-ink: #2a1533;  /* títulos, en violeta profundo */
  --claro-txt: #6a5a48;  /* texto secundario, gris cálido */
  --claro-oro: #9c6d24;  /* dorado oscurecido para que lea sobre crema */
  --claro-orn: #b98a3f;  /* filete sobre crema */
  --claro-line:#e6d6b6;

  /* --- tipografía --- */
  --serif: Georgia, "Times New Roman", serif;
  --sans:  "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* Tipografía del menú (Google Fonts). Si se quiere sacar la dependencia
     externa, basta con borrar "Jost" y queda la del sistema. */
  --menu:  "Jost", "Segoe UI", system-ui, sans-serif;

  /* --- medidas --- */
  --ancho: 1160px;
  --lado: 40px;
  --r: 4px;
  --header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--v900);
  color: var(--crema);
  font: 400 16.5px/1.68 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

.wrap { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lado); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Ornamentos
   -------------------------------------------------------------------------- */
.orn { color: var(--oro); display: block; margin: 0 auto; }
.orn--sec { opacity: .6; margin-top: 18px; }
.orn--hero { opacity: .78; }

/* Corona de filete — el ornamento grande del hero.
   El dibujo vive en el sprite <defs> del HTML; aca solo se lo dimensiona.
   Se mide por ANCHO y la altura sale sola del viewBox (340x86), asi el
   trazo se afina o se engrosa solo al cambiar --corona-ancho. */
.corona {
  display: block; margin: 0 auto;
  width: var(--corona-ancho, 300px); height: auto;
  color: var(--orn-oro);
  opacity: var(--corona-op, .92);
}
.claro .corona { color: var(--claro-orn); }

.corona--hero {
  --corona-ancho: min(300px, 66%);
  margin-top: 16px;
}

/* En pantalla chica el ornamento no se achica: se le apagan las hojas y los
   brotes, que a ese tamano solo ensucian. */
@media (max-width: 700px) {
  :root { --orn-det: 0; }
  .corona--hero { --corona-ancho: min(250px, 82%); margin-top: 12px; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(26, 12, 34, .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--v700);
  box-shadow: 0 1px 0 rgba(216, 168, 96, .22);
}
.header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }

.wordmark { display: flex; align-items: center; gap: 11px; flex: none; }
.wordmark .fl { color: var(--oro); font-size: 17px; line-height: 1; }
.wordmark .fl-ico { width: 20px; height: 20px; flex: none; color: var(--oro); }
.wordmark .nm {
  font: 400 15px/1 var(--serif);
  letter-spacing: .21em; text-transform: uppercase; color: var(--crema);
}

.nav { display: flex; gap: 20px;
  font: 600 13px/1 var(--menu); letter-spacing: 0; text-transform: uppercase; }
.nav a { color: #fff; padding: 5px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--oro-lt); }
.nav a[aria-current="page"] { color: var(--oro); border-bottom-color: var(--oro); }

/* Calibrado el 25/08/2026 con dela/config-vende.html. Si se vuelve a tocar,
   conviene hacerlo ahí y pegar el resultado, no a ojo: la herramienta mide el
   botón dibujado y avisa si el alto baja de los 44 px del área táctil. */
.btn-wa {
  display: inline-flex; align-items: center; flex: none;
  gap: 5px;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--wa);
  color: #fff;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.08em;
  transition: background .18s;
}
.btn-wa:hover { background: var(--wa-dk); }

.hamb {
  display: none; flex: none;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--v600); border-radius: var(--r);
  color: var(--crema); cursor: pointer;
}
.hamb span { display: block; width: 19px; height: 1.5px; margin: 4px auto; background: currentColor; transition: .22s; }
.hamb[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamb[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamb[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.b1 {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 28px; border-radius: 999px;
  background: var(--wa); color: #fff; font-size: 16px; font-weight: 700;
  transition: background .18s;
}
.b1:hover { background: var(--wa-dk); }
.b2 {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 28px; border-radius: 999px;
  border: 1px solid var(--oro-dk); background: rgba(216, 168, 96, .06);
  color: var(--oro-lt); font-size: 16px; font-weight: 600;
  transition: color .24s ease, border-color .24s ease, box-shadow .24s ease;
}

/* Hover: el boton se invierte y se llena de pan de oro. El degrade es mas
   ancho que el boton y entra deslizandose, asi el oro tiene un brillo que
   recorre la pieza en vez de un color plano. Va en ::before y no en
   background propio para poder animar la entrada sin tocar el borde. */
.b2::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    var(--oro-dk) 0%, var(--oro) 24%, var(--oro-lt) 48%, var(--oro) 72%, var(--oro-dk) 100%);
  background-size: 230% 100%;
  background-position: 100% 0;
  opacity: 0;
  transition: opacity .24s ease, background-position .6s cubic-bezier(.22,.61,.36,1);
}
.b2:hover, .b2:focus-visible {
  color: #23102d;                      /* violeta profundo: el color se invierte */
  border-color: var(--oro-lt);
  box-shadow: 0 8px 22px -12px rgba(216, 168, 96, .75);
}
.b2:hover::before, .b2:focus-visible::before { opacity: 1; background-position: 0 0; }
.b2:active { box-shadow: 0 3px 10px -8px rgba(216, 168, 96, .8); }

@media (prefers-reduced-motion: reduce) {
  .b2::before { transition: opacity .18s ease; background-position: 0 0; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; text-align: center;
  background: radial-gradient(ellipse 80% 62% at 50% 42%, #3a1d47 0%, var(--v900) 72%);
}
.hero__ph { position: absolute; inset: 0; }
.hero__ph img { width: 100%; height: 100%; object-fit: cover; opacity: .17; }
.hero__ph::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 55% at 50% 45%, rgba(26,12,34,.94) 22%, rgba(26,12,34,.72) 100%);
}
.hero .wrap { position: relative; padding-block: 62px 80px; }
.hero__logo { width: 100%; max-width: 480px; height: auto; margin: 0 auto 22px; }
.hero__tag { font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.hero h1 {
  margin: 24px auto 0; max-width: 17ch;
  font: 400 50px/1.16 var(--serif); letter-spacing: -.012em; color: var(--crema);
}
.hero h1 em { font-style: italic; color: var(--oro-lt); }
.hero__sub { margin: 20px auto 0; max-width: 52ch; font-size: 18.5px; color: var(--lav-lt); }
.acts { display: flex; gap: 14px; margin-top: 34px; justify-content: center; flex-wrap: wrap; }
.micro { margin-top: 18px; font-size: 14px; color: var(--lav); }

/* --------------------------------------------------------------------------
   Franja de confianza
   -------------------------------------------------------------------------- */
.trust {
  background: var(--v800); border-block: 1px solid var(--v700);
  box-shadow: inset 0 1px 0 rgba(216,168,96,.22), inset 0 -1px 0 rgba(216,168,96,.22);
}
.trust .wrap { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: 32px; }
.trust__it { display: flex; gap: 14px; align-items: flex-start; padding: 0 26px; border-left: 1px solid var(--v700); }
.trust__it:first-child { border-left: 0; padding-left: 0; }
.trust__it i {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  font-style: normal; font-size: 17px; color: var(--oro);
  border: 1px solid var(--oro-dk); border-radius: 50%; background: rgba(216,168,96,.08);
}
.trust__it b { display: block; font-size: 15.5px; margin-bottom: 2px; color: var(--crema); }
.trust__it span { font-size: 14px; color: var(--lav); }

/* --------------------------------------------------------------------------
   Secciones
   -------------------------------------------------------------------------- */
.sec { padding: 86px 0; }
.sec--alt { background: var(--v850); border-block: 1px solid var(--v700); box-shadow: inset 0 1px 0 rgba(216,168,96,.18); }

/* ==========================================================================
   Tema claro — secciones con fondo crema (alternancia)
   Solo afecta el "chrome" de la sección; las tarjetas/piezas siguen violetas.
   ========================================================================== */
.sec.claro, .banda.claro {
  background: var(--claro-bg); color: var(--claro-txt);
  border-block: 1px solid var(--claro-line); box-shadow: none;
}
.claro .sechead .k         { color: var(--claro-oro); }
.claro .sechead h2         { color: var(--claro-ink); }
.claro .sechead p          { color: var(--claro-txt); }
.claro .orn                { color: var(--claro-orn); }

/* Botón "ver más" (solo aparece suelto sobre crema en .vermas) */
.claro .vermas .b2 { color: #7a5218; border-color: #c9a15f; background: rgba(156,109,36,.08); }
.claro .vermas .b2::before {
  background: linear-gradient(100deg,
    #a8762c 0%, #c9a15f 24%, #e8c98e 48%, #c9a15f 72%, #a8762c 100%);
  background-size: 230% 100%; background-position: 100% 0;
}
.claro .vermas .b2:hover, .claro .vermas .b2:focus-visible {
  color: #2a1533; border-color: var(--claro-oro);
  box-shadow: 0 8px 22px -12px rgba(156, 109, 36, .6);
}

/* Tira de íconos del teaser, por si una queda clara */
.claro .ico-lg { color: var(--claro-orn); }

/* Nota "no compramos / también muebles" */
.claro .nocompramos { border-color: rgba(90,60,30,.28); color: var(--claro-txt); }
.claro .nocompramos b { color: var(--claro-ink); }

/* Pasos */
.claro .paso h3 { color: var(--claro-ink); }
.claro .paso p  { color: var(--claro-txt); }
.claro .paso::before { color: var(--claro-oro); border-color: #c9a15f; background: rgba(156,109,36,.08); }

/* Preguntas frecuentes */
.claro .faq details { border-color: rgba(90,60,30,.18); }
.claro .faq summary { color: var(--claro-ink); }
.claro .faq summary::after { color: var(--claro-oro); }
.claro .faq details p { color: var(--claro-txt); }

/* Prosa (nosotros) */
.claro .prosa p { color: var(--claro-txt); }
.claro .prosa .destacado { color: var(--claro-ink); }

/* Banda a dos columnas en claro */
.banda.claro h2 { color: var(--claro-ink); }
.banda.claro p  { color: var(--claro-txt); }

.sechead { text-align: center; margin-bottom: 44px; }
.sechead .k { font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--oro); }
.sechead h2 { margin: 14px 0 0; font: 400 42px/1.14 var(--serif); letter-spacing: -.014em; }
.sechead p { margin: 14px auto 0; max-width: 58ch; color: var(--lav); }

/* Párrafo destacado (teaser qué compramos): resalta más que el texto normal */
.sechead p.lead-destacado {
  color: var(--oro-lt);
  font-size: 19px;
  line-height: 1.6;
  font-weight: 500;
}

/* Frase de cierre, ubicada debajo del listado de íconos */
.cierre-frase {
  text-align: center;
  margin: 8px auto 30px;
  max-width: 22ch;
  font: 400 42px/1.14 var(--serif);
  letter-spacing: -.014em;
  color: var(--crema);
}
@media (max-width: 640px) {
  .cierre-frase { font-size: 34px; }
  .sechead p.lead-destacado { font-size: 17.5px; }
}

/* --------------------------------------------------------------------------
   Qué compramos
   -------------------------------------------------------------------------- */
.rubros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.rubro {
  padding: 26px 22px; background: var(--v800);
  border: 1px solid var(--v700); border-radius: var(--r);
  transition: border-color .2s, transform .2s;
}
.rubro:hover { border-color: var(--oro-dk); transform: translateY(-3px); }
.rubro i { display: block; font-style: normal; font-size: 21px; color: var(--oro); margin-bottom: 12px; }
.rico { width: 34px; height: 34px; display: block; color: var(--oro); margin-bottom: 14px; }
.rubro h3 { margin: 0 0 5px; font: 400 19px/1.3 var(--serif); color: var(--crema); }
.rubro p { margin: 0; font-size: 14.5px; color: var(--lav); }

/* Tira de íconos (teaser de qué compramos en la home) */
.ico-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 30px; margin: 4px auto 36px; max-width: 720px; }
.ico-lg { width: 46px; height: 46px; color: var(--oro); }

.nocompramos {
  margin-top: 34px; padding: 22px 26px;
  border: 1px dashed var(--v600); border-radius: var(--r);
  font-size: 15px; color: var(--lav); text-align: center;
}
.nocompramos b { color: var(--crema); font-weight: 600; }

/* --------------------------------------------------------------------------
   Cómo funciona
   -------------------------------------------------------------------------- */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: paso; }
.paso { counter-increment: paso; position: relative; padding-top: 58px; }
.paso::before {
  content: counter(paso); position: absolute; top: 0; left: 0;
  width: 42px; height: 42px; display: grid; place-items: center;
  font: 400 18px/1 var(--serif); color: var(--oro);
  border: 1px solid var(--oro-dk); border-radius: 50%; background: rgba(216,168,96,.08);
}
.paso h3 { margin: 0 0 7px; font: 400 21px/1.3 var(--serif); color: var(--crema); }
.paso p { margin: 0; font-size: 15.5px; color: var(--lav); }

/* --------------------------------------------------------------------------
   VIDRIERA — sistema «chapa y filete» (portado del rediseño)

   La ficha tiene dos formas según el ancho:
     · < 700px  vertical, con el marco dibujado en CSS (borde + doble filete)
     · >= 700px horizontal, con el marco de img/marco-ficha.png por encima

   Los remates de voluta y las volutas de esquina los inyecta script.js:
   el HTML queda limpio.
   -------------------------------------------------------------------------- */

/* --- 1 · REGLA DE FILETE (.frule) — la pieza madre del sistema -------------
   Doble línea de oro de punta a punta, rematada por dos volutas enfrentadas,
   que se ABRE en el medio para alojar algo (acá, la categoría de la ficha).
   Las líneas son gradientes (se estiran solas) y los remates SVG (nítidos
   siempre). */
.frule {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--frule-h, 26px);
  --frule-sangria: 30px;
  background:
    linear-gradient(rgba(var(--fil-oro-rgb), .85) 0 0)
      var(--frule-sangria) calc(50% - 3px) /
      calc(100% - var(--frule-sangria) * 2) 1px no-repeat,
    linear-gradient(rgba(var(--fil-oro-rgb), .32) 0 0)
      var(--frule-sangria) calc(50% + 3px) /
      calc(100% - var(--frule-sangria) * 2) 1px no-repeat;
}
.frule__rem {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 26px; height: 26px; pointer-events: none;
  color: var(--orn-oro);
}
.frule__rem--izq { left: 0; }
.frule__rem--der { right: 0; transform: scaleX(-1); }

/* Lo que va en el medio interrumpe las líneas: se pinta con el color de la
   superficie que tiene detrás, como la chapa de un cartel. */
.frule__placa {
  position: relative; background: var(--sup, var(--v800));
  padding: 0 12px;
  font: 600 11px/2 var(--menu);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--orn-oro);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: calc(100% - 84px);
}

/* --- 2 · VOLUTA DE ESQUINA (.orn-esq) --------------------------------------
   Grande y de brazos finos: la tinta queda dentro de los 14px del borde, así
   el ornamento puede medir 48px sin pisar nunca la foto ni el texto. */
.orn-esq {
  position: absolute; pointer-events: none; z-index: 4;
  width: var(--esq, 48px); height: var(--esq, 48px);
  color: var(--orn-oro);
  opacity: var(--esq-op, .8);
  transition: opacity var(--dur-2) var(--ease);
}
.orn-esq--tl { top: 0; left: 0; }
.orn-esq--tr { top: 0; right: 0; transform: scaleX(-1); }
.orn-esq--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.orn-esq--br { bottom: 0; right: 0; transform: scale(-1); }

/* --- 3 · CINTA de estado --------------------------------------------------
   Puntas en flecha recortadas con clip-path: es una cinta de cartelería, no
   una píldora genérica. */
.cinta {
  display: inline-flex; align-items: center;
  padding: 7px 18px;
  font: 600 11px/1 var(--menu);
  letter-spacing: .14em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%, 8px 50%);
}
.cinta--disp { background: rgba(37, 168, 102, .2);   color: #7fe0ae; }
.cinta--res  { background: rgba(216, 168, 96, .2);   color: var(--oro-lt); }
.cinta--vend { background: rgba(179, 159, 196, .16); color: var(--lav); }

/* --- 4 · LA FICHA ---------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Opiniones — tira compacta

   Va entre "tus antigüedades valen más" y "pasá por el local": la prueba
   justo después del argumento y antes de la invitación. Es una TIRA, no una
   sección: sin copete, sin tarjetas y sin botón, para no cortar el envión
   con un bloque grande. Sigue el mismo patrón que .trust — filete arriba y
   abajo, columnas separadas por una línea fina.
   -------------------------------------------------------------------------- */
.opiniones {
  background: var(--v900);
  border-block: 1px solid var(--v700);
  box-shadow: inset 0 1px 0 rgba(216,168,96,.16), inset 0 -1px 0 rgba(216,168,96,.16);
}
.opiniones .wrap { padding-block: 36px; }

.opiniones__enc {
  margin: 0 0 24px; text-align: center;
  font-size: 13.5px; letter-spacing: .04em; color: var(--lav);
}
.opiniones__enc b { color: var(--crema); font-weight: 400; }
.opiniones__enc a { color: var(--oro); border-bottom: 1px solid rgba(var(--fil-oro-rgb), .4); }
.opiniones__enc a:hover { color: var(--oro-lt); border-bottom-color: var(--oro-lt); }
.opiniones__estrellas {
  color: var(--oro); letter-spacing: .1em; margin-right: 9px; font-size: 12.5px;
}

.opiniones__lista { display: grid; grid-template-columns: repeat(3, 1fr); }
.opiniones__lista figure {
  margin: 0; padding: 0 26px; border-left: 1px solid var(--v700);
}
.opiniones__lista figure:first-child { border-left: 0; padding-left: 0; }
.opiniones__lista blockquote {
  margin: 0 0 11px;
  font: italic 400 16px/1.55 var(--serif); color: var(--crema);
}
/* Comillas tipográficas sin ensuciar el HTML. */
.opiniones__lista blockquote::before { content: "\201C"; }
.opiniones__lista blockquote::after  { content: "\201D"; }
.opiniones__lista figcaption {
  font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--lav);
}

@media (max-width: 860px) {
  .opiniones .wrap { padding-block: 30px; }
  /* Apiladas, la línea divisoria pasa de izquierda a arriba. */
  .opiniones__lista { grid-template-columns: 1fr; gap: 20px; }
  .opiniones__lista figure {
    padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--v700);
  }
  .opiniones__lista figure:first-child { padding-top: 0; border-top: 0; }
  .opiniones__lista blockquote { font-size: 15.5px; }
}

.piezas { display: grid; grid-template-columns: 1fr; gap: 40px 30px; }

/* Fichas fantasma mientras el panel contesta. Ocupan el mismo lugar que las
   piezas de verdad, así la grilla no salta cuando llegan. */
.pieza-fantasma {
  min-height: 400px;
  border: 1.5px solid rgba(var(--fil-oro-rgb), .22);
  border-radius: 3px;
  background: linear-gradient(100deg, #24102f 34%, #32183f 50%, #24102f 66%)
              0 0 / 300% 100%;
  animation: fantasma 1.5s var(--ease) infinite;
}
@keyframes fantasma { from { background-position: 150% 0; } to { background-position: -150% 0; } }

/* La regla global de reduced-motion solo acorta la duración: en una animación
   infinita eso es un parpadeo. Acá se apaga del todo. */
@media (prefers-reduced-motion: reduce) {
  .pieza-fantasma { animation: none; background-position: 50% 0; }
}

.pieza {
  position: relative;
  display: flex; flex-direction: column;
  padding: 14px 16px 18px;
  /* Superficie de la ficha: violeta con profundidad, no un plano. Vive en
     banda crema pero la ficha sigue siendo violeta. */
  --sup: #2a1338;
  --esq: 48px; --esq-op: .8;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(216,168,96,.07) 0%, transparent 62%),
    linear-gradient(179deg, #2c1540 0%, #24102f 58%, #1d0c28 100%);
  border: 1.5px solid rgba(var(--fil-oro-rgb), .72);
  border-radius: 3px;
  box-shadow: var(--sh-2);
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
/* Segundo filete, por dentro: el doble borde del fileteado. */
.pieza::before {
  content: ""; position: absolute; inset: 5px; z-index: 1; pointer-events: none;
  border: 1px solid rgba(var(--fil-oro-rgb), .3); border-radius: 2px;
  transition: border-color var(--dur-2) var(--ease);
}
/* Destello especular sobre el vidrio de la vitrina. */
.pieza::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(104deg, transparent 42%, rgba(240,216,168,.13) 50%, transparent 58%);
  background-size: 260% 100%; background-position: 170% 0;
  transition: background-position var(--dur-3) var(--ease);
}
.pieza:hover { transform: translateY(-6px); box-shadow: var(--sh-3);
               border-color: rgba(var(--fil-oro-rgb), 1); }
.pieza:hover::before { border-color: rgba(var(--fil-oro-rgb), .58); }
.pieza:hover::after  { background-position: -60% 0; }
.pieza:hover .orn-esq { opacity: 1; }

/* Copete: la categoría deja de ser un dato perdido y pasa a coronar la ficha,
   montada en una regla de filete. Es el ornamento haciendo trabajo. La
   sangría sigue al tamaño del ornamento para que los remates no se pisen. */
.pieza__copete { --frule-h: 28px; margin: 0 calc(var(--esq) - 10px) 13px; }

/* Foto: doble filete propio, dibujado con box-shadow (cero nodos). */
.pieza__ver {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in;
  position: relative; z-index: 2; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(var(--fil-oro-rgb), .6),
              0 0 0 4px var(--sup),
              0 0 0 5px rgba(var(--fil-oro-rgb), .26);
  transition: box-shadow var(--dur-2) var(--ease);
}
.pieza:hover .pieza__ver {
  box-shadow: 0 0 0 1px rgba(var(--fil-oro-rgb), .95),
              0 0 0 4px var(--sup),
              0 0 0 5px rgba(var(--fil-oro-rgb), .45);
}
.pieza img { width: 100%; height: clamp(230px, 23vw, 300px); object-fit: cover; display: block; }
.pieza__ver .lupa {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: flex; align-items: center; gap: 6px; padding: 7px 13px;
  background: rgba(26,12,34,.86); border: 1px solid rgba(var(--fil-oro-rgb), .5);
  color: var(--oro-lt); font: 400 12.5px/1 var(--sans);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.pieza:hover .lupa, .pieza__ver:focus-visible .lupa { opacity: 1; transform: none; }

.pieza__bd { padding: 20px 6px 0; display: flex; flex-direction: column; flex: 1;
             position: relative; z-index: 8; }
.pieza h3 { margin: 0 0 6px; font: 400 19.5px/1.3 var(--serif); color: var(--crema); }
.pieza__meta { font-size: 13.5px; letter-spacing: .04em; color: var(--lav); margin-bottom: 16px; }

/* Placa del pie: separada por su propio filete doble. */
.pieza__pie {
  position: relative; margin-top: auto; padding-top: 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pieza__pie::before {
  content: ""; position: absolute; top: 0; left: -6px; right: -6px; height: 3px;
  background: linear-gradient(rgba(var(--fil-oro-rgb), .5) 0 0)  0 0 / 100% 1px no-repeat,
              linear-gradient(rgba(var(--fil-oro-rgb), .22) 0 0) 0 2px / 100% 1px no-repeat;
}

/* CTA: placa dorada con filete interior, no una píldora genérica. */
.pieza__cta {
  flex: none; position: relative;
  /* min-height fija el blanco de toque en 44px: con padding solo, la placa
     quedaba en 33px y era incómoda de tocar en mobile. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border-radius: 2px;
  background: linear-gradient(178deg, var(--oro-lt) 0%, var(--oro) 46%, #c08f42 100%);
  color: #1a0c22; font: 700 13px/1 var(--menu);
  letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 7px rgba(0,0,0,.32);
  transition: filter var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.pieza__cta::after {
  content: ""; position: absolute; inset: 3px; border-radius: 1px;
  border: 1px solid rgba(26,12,34,.34); pointer-events: none;
  transition: inset var(--dur-2) var(--ease);
}
.pieza__cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pieza__cta:hover::after { inset: 2px; }

@media (max-width: 700px) {
  .pieza { --esq: 34px; padding: 12px 13px 16px; }
  .pieza__copete { --frule-h: 24px; margin-bottom: 11px; }
  .pieza__copete .frule__placa { font-size: 10px; letter-spacing: .16em; }
  .pieza__bd { padding-top: 17px; }
  .piezas { gap: 40px 20px; }
  .frule { --frule-sangria: 24px; }
  .frule__rem { width: 21px; height: 21px; }
}

/* --------------------------------------------------------------------------
   FICHA HORIZONTAL con el marco dibujado (img/marco-ficha.png)

   Todo lo de acá sale de medir el propio archivo, no de estimarlo:
     · el PNG mide 1536x1024 pero trae margen transparente. Medido sobre el
       canal alfa (no estimado): 12 izq/der, 100 arriba, 118 abajo. Lo que se
       ve es 1512x806 = 1.876:1. Por eso el fondo se usa como sprite: se
       muestra SOLO la caja opaca, y por eso el alto va al 127.047% con la
       posicion vertical en 45.87% (asi el borde de arriba cae exactamente
       en el 0 de la caja y la curva de la esquina se cierra entera).
     · el hueco de la foto, ya relativo a esa caja visible:
         izq 6.7%  arriba 11.1%  ancho 50.3%  alto 79.1%
     · el paño violeta del texto arranca en el 57.4% del ancho.

   El marco va POR ENCIMA de la foto (z-index 6): el hueco tiene las esquinas
   caladas, así que si la foto fuera por delante se comería ese recorte.
   En pantallas chicas no se carga: la ficha vuelve a la versión vertical,
   porque a 331px el paño de texto quedaría en 120px. Como el background vive
   dentro de la media query, el teléfono ni siquiera descarga el archivo.
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .piezas { grid-template-columns: repeat(2, 1fr); gap: 42px 30px; }

  /* Acá la ficha real pasa a horizontal con el marco dibujado: la fantasma
     tiene que copiar esa silueta o la grilla salta al llegar las piezas. */
  .pieza-fantasma {
    aspect-ratio: 1512 / 806; min-height: 0;
    border: 0; border-radius: 14px;
  }

  .pieza {
    aspect-ratio: 1512 / 806;
    padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none;
  }
  .pieza > .orn-esq { display: none; }   /* el marco ya trae sus esquinas */

  /* El marco, recortado a su caja opaca y por encima de la foto. La sombra va
     con filter y no con box-shadow para que siga la silueta del dibujo y no
     un rectángulo. */
  .pieza::before {
    display: block; content: ""; position: absolute; inset: 0; z-index: 6;
    border: 0; border-radius: 0; pointer-events: none;
    background: url("img/marco-ficha.png") 50% 45.87% / 101.587% 127.047% no-repeat;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .45));
    transition: filter var(--dur-2) var(--ease);
  }
  .pieza:hover::before { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .55)); }

  /* La sombra rectangular de .pieza:hover pesa más que el box-shadow:none de
     acá arriba (:hover suma especificidad), así que volvía a aparecer al
     pasar el mouse y asomaba EN PUNTA por fuera de las esquinas redondeadas
     del marco. La profundidad la da el drop-shadow del ::before, que sí sigue
     la silueta del dibujo. */
  .pieza:hover { box-shadow: none; }

  /* El destello del vidrio pasa POR ENCIMA del oro: es lo que lo hace relucir. */
  .pieza::after { z-index: 7; }

  /* --- la foto, dentro del hueco --- */
  .pieza__ver {
    position: absolute; z-index: 2; margin: 0; box-shadow: none;
    left: 6.7%; top: 11.1%; width: 50.3%; height: 79.1%;
  }
  .pieza:hover .pieza__ver { box-shadow: none; }
  .pieza img { width: 100%; height: 100%; object-fit: cover; }
  .pieza__ver .lupa { right: 9px; bottom: 9px; padding: 6px 11px; font-size: 12px; }

  /* --- la categoría, arriba del paño violeta --- */
  .pieza__copete {
    position: absolute; z-index: 8;
    left: 60%; right: 6%; top: 15%;
    margin: 0; min-height: 0;
    background: none;              /* apaga las líneas de la regla de filete */
    justify-content: flex-start;
  }
  .pieza__copete .frule__rem { display: none; }
  .pieza__copete .frule__placa {
    background: none; padding: 0; max-width: 100%; white-space: normal;
    font-size: clamp(9px, .76vw, 10.5px); letter-spacing: .17em; line-height: 1.45;
  }

  /* --- el cuerpo, en el resto del paño --- */
  .pieza__bd {
    position: absolute; z-index: 8;
    left: 60%; right: 6%; top: 26%; bottom: 13%;
    padding: 0; display: flex; flex-direction: column;
  }
  .pieza h3 {
    margin: 0 0 4px;
    font: 400 clamp(14px, 1.3vw, 17.5px)/1.26 var(--serif);
    color: var(--crema);
    /* La columna es angosta: se limita a tres líneas y el título completo
       queda disponible en el visor. */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .pieza__meta { font-size: clamp(11px, .95vw, 12.5px); margin-bottom: 8px; }

  /* En el paño angosto la cinta y el botón no entran uno al lado del otro. */
  .pieza__pie {
    flex-direction: column; align-items: stretch; gap: 8px;
    margin-top: auto; padding-top: 0;
  }
  .pieza__pie::before { display: none; }
  .pieza__pie .cinta { align-self: flex-start; padding: 4px 13px; font-size: 9.5px; }
  .pieza__cta {
    /* 44px: la tablet es táctil y el botón tiene que poder tocarse cómodo. */
    width: 100%; min-height: 44px; padding: 0 10px;
    font-size: clamp(10px, .88vw, 12px); letter-spacing: .07em;
  }

  /* Una ficha huérfana en la última fila queda centrada en vez de dejar hueco. */
  .piezas > .pieza:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1; max-width: calc(50% - 15px); margin-inline: auto;
  }
}

/* Entre 700 y 980 va a una columna: la ficha se agranda y el paño de texto
   pasa de ~190px a ~250px, que es donde mejor respira. */
@media (min-width: 700px) and (max-width: 980px) {
  .piezas { grid-template-columns: 1fr; }
  .piezas > .pieza:last-child:nth-child(2n + 1) { max-width: none; }
}

.vermas { text-align: center; margin-top: 44px; }

/* Vidriera vacía o caída. Ocupa toda la grilla para quedar centrada, y no un
   hueco de una columna. */
.vidriera-msg {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; text-align: center; padding: 30px 0;
}
.vidriera-msg p { margin: 0; max-width: 46ch; color: var(--lav); font-size: 17px; }
.claro .vidriera-msg p { color: var(--claro-txt); }

/* --------------------------------------------------------------------------
   Visor de pieza (galería)
   -------------------------------------------------------------------------- */
.visor { position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(10, 4, 14, .93); backdrop-filter: blur(6px); }
.visor[open], .visor.abierto { display: flex; }
.visor__caja { position: relative; width: 100%; max-width: 1000px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--v800); border: 1px solid var(--v600); border-radius: var(--r);
  animation: visorIn .26s ease both; }
@keyframes visorIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.visor__cerrar { position: absolute; top: 12px; right: 12px; z-index: 6;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(26,12,34,.85); border: 1px solid var(--v600); color: var(--crema);
  font: 400 20px/1 var(--sans); }
.visor__cerrar:hover { border-color: var(--oro); color: var(--oro); }
.visor__grid { display: grid; grid-template-columns: 1.25fr .75fr; }
.visor__foto { position: relative; background: #120820; }
.visor__foto img { width: 100%; height: 480px; object-fit: contain; }
.visor__nav { position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: rgba(26,12,34,.8); border: 1px solid var(--v600); color: var(--crema);
  font: 400 19px/1 var(--sans); display: grid; place-items: center; }
.visor__nav:hover { border-color: var(--oro); color: var(--oro); }
.visor__nav--prev { left: 12px; } .visor__nav--next { right: 12px; }
.visor__contador { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  padding: 5px 13px; border-radius: 999px; background: rgba(26,12,34,.8);
  border: 1px solid var(--v600); font-size: 12.5px; color: var(--lav); }
/* La columna de texto tiene alto fijo (lo marca la foto, 480px). Con
   descripción larga + ficha técnica + muchas miniaturas el contenido pasaba
   ese alto y el botón de contacto quedaba cortado: acá se le permite
   scrollear por dentro en vez de desbordar.
   min-height:0 es lo que habilita el scroll dentro de un item de grid. */
.visor__info {
  padding: 32px 30px; display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.visor__info .k { font-size: 11.5px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--oro); }
.visor__info h3 { margin: 12px 0 8px; font: 400 27px/1.22 var(--serif); color: var(--crema); }
.visor__info .desc { margin: 0 0 20px; font-size: 15.5px; color: var(--lav); }
.visor__info .desc[hidden] { display: none; }

/* Ficha técnica de la pieza: procedencia, época, materiales. Dos columnas,
   la etiqueta en oro chiquito y el dato al lado. Cada fila la dibuja
   script.js solo si el panel trajo ese campo. */
.visor__datos {
  margin: 0 0 22px; padding: 16px 0 0;
  border-top: 1px solid var(--v700);
  display: grid; grid-template-columns: auto 1fr; gap: 8px 16px;
  font-size: 14.5px;
}
.visor__datos[hidden] { display: none; }
.visor__datos dt {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--oro); padding-top: 2px;
}
.visor__datos dd { margin: 0; color: var(--lav-lt); }

/* En pantalla chica la columna de etiquetas queda en ~43px y "Procedencia"
   se parte en tres líneas. Ahí la etiqueta pasa arriba del dato, igual que
   en las tarjetas de contacto. */
@media (max-width: 860px) {
  .visor__datos { grid-template-columns: 1fr; gap: 0; }
  .visor__datos dt { padding-top: 13px; }
  .visor__datos dt:first-child { padding-top: 0; }
  .visor__datos dd { margin-top: 3px; }
}

.visor__tiras { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; }
.visor__tira { width: 58px; height: 58px; padding: 0; cursor: pointer; overflow: hidden;
  border: 1px solid var(--v600); border-radius: 3px; background: none; }
.visor__tira img { width: 100%; height: 100%; object-fit: cover; }
.visor__tira[aria-current="true"] { border-color: var(--oro); }
.visor__info .b1 { margin-top: auto; }

@media (max-width: 860px) {
  .visor { padding: 12px; }
  .visor__grid { grid-template-columns: 1fr; }
  .visor__foto img { height: 300px; }
  .visor__info { padding: 24px 20px; }
  .visor__info h3 { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   Banda a dos columnas
   -------------------------------------------------------------------------- */
.banda .wrap { display: grid; grid-template-columns: 1.12fr .88fr; gap: 54px; align-items: center; padding-block: 76px; }
.banda h2 { margin: 0 0 16px; font: 400 39px/1.15 var(--serif); letter-spacing: -.014em; }
.banda p { margin: 0 0 28px; color: var(--lav-lt); font-size: 17.5px; }
.banda__pic { padding: 9px; border: 1px solid var(--oro-dk); }
.banda__pic img { width: 100%; height: 340px; object-fit: cover; }

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */
.contacto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; text-align: left; }
.dato { padding: 26px 24px; background: var(--v800); border: 1px solid var(--v700); border-radius: var(--r); }
.dato .k { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
.dato p { margin: 10px 0 0; font-size: 16px; color: var(--crema); }
.dato p span { display: block; color: var(--lav); font-size: 14.5px; }

/* --------------------------------------------------------------------------
   Encabezado de página interna
   -------------------------------------------------------------------------- */
.pagehead { position: relative; overflow: hidden; text-align: center;
  background: radial-gradient(ellipse 90% 80% at 50% 0%, #331641 0%, var(--v900) 70%);
  border-bottom: 1px solid var(--v700); }
.pagehead .wrap { position: relative; padding-block: 58px 54px; }
.pagehead .k { font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--oro); }
.pagehead h1 { margin: 14px 0 0; font: 400 46px/1.12 var(--serif); letter-spacing: -.014em; }
.pagehead p { margin: 16px auto 0; max-width: 60ch; color: var(--lav); font-size: 17.5px; }

/* --------------------------------------------------------------------------
   Lista de categorías (vidriera / qué compramos)
   -------------------------------------------------------------------------- */
.cats { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.cats span { display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--v600);
  background: var(--v800); color: var(--crema); font-size: 14.5px; }
.cico { width: 20px; height: 20px; flex: none; color: var(--oro); }

/* --------------------------------------------------------------------------
   Banner de Instagram
   -------------------------------------------------------------------------- */
.ig-banner { background: var(--v800); border: 1px solid var(--v600); border-radius: var(--r);
  padding: 38px 34px; text-align: center; position: relative; }
.ig-banner::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(216,168,96,.24);
  border-radius: 2px; pointer-events: none; }
.ig-banner h2 { margin: 0 0 10px; font: 400 30px/1.2 var(--serif); }
.ig-banner p { margin: 0 auto 24px; max-width: 52ch; color: var(--lav); }

/* --------------------------------------------------------------------------
   Preguntas frecuentes
   -------------------------------------------------------------------------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--v700); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font: 400 20px/1.35 var(--serif); color: var(--crema); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 20px;
  font: 400 26px/1 var(--sans); color: var(--oro); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--lav); font-size: 16px; }

/* --------------------------------------------------------------------------
   Tarjetas de contacto
   -------------------------------------------------------------------------- */
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tarjeta {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 34px 30px 30px; background: var(--v800);
  border: 1px solid var(--v600); border-radius: 6px;
  animation: tarjetaSube .6s ease both;
  transition: transform .26s, border-color .26s, box-shadow .26s;
}
.tarjeta:nth-child(2) { animation-delay: .12s; }
.tarjeta:nth-child(3) { animation-delay: .24s; }
@keyframes tarjetaSube { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.tarjeta::before { content: ""; position: absolute; inset: 7px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(216,168,96,.22); border-radius: 3px; transition: border-color .26s; }
.tarjeta::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(240,216,168,.10), transparent);
  transform: skewX(-18deg); transition: left .7s ease; pointer-events: none; z-index: 1; }
.tarjeta:hover { transform: translateY(-6px); border-color: var(--oro-dk);
  box-shadow: 0 16px 36px rgba(0,0,0,.42); }
.tarjeta:hover::before { border-color: rgba(216,168,96,.45); }
.tarjeta:hover::after { left: 120%; }
.tarjeta__ico { width: 54px; height: 54px; flex: none; display: grid; place-items: center;
  margin-bottom: 20px; border-radius: 50%; color: var(--oro);
  border: 1px solid var(--oro-dk); background: rgba(216,168,96,.08);
  transition: transform .32s; }
.tarjeta__ico svg { width: 26px; height: 26px; }
.tarjeta:hover .tarjeta__ico { transform: scale(1.09) rotate(-7deg); }
.tarjeta h2 { margin: 0 0 10px; font: 400 25px/1.25 var(--serif); color: var(--crema); }
.tarjeta > p { margin: 0 0 22px; font-size: 15.5px; color: var(--lav); }
.tarjeta__datos { margin: 0 0 24px; padding: 0; list-style: none; }
.tarjeta__datos li { padding: 11px 0; border-bottom: 1px solid var(--v700); font-size: 15px; color: var(--crema); }
.tarjeta__datos li:last-child { border-bottom: 0; }
.tarjeta__datos b { display: block; font: 400 11.5px/1 var(--sans); letter-spacing: .18em;
  text-transform: uppercase; color: var(--oro); margin-bottom: 5px; }
.tarjeta__btns { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 3; }
.btn-oro { background: var(--oro); color: #1a0c22; border-color: var(--oro); }
.btn-oro:hover { background: var(--oro-lt); border-color: var(--oro-lt); color: #1a0c22; }

/* --- FAJA DIAGONAL de la tarjeta -------------------------------------------
   Banda de chapa dorada cruzando la esquina superior derecha. La tarjeta ya
   tiene overflow:hidden, asi que la banda se recorta sola contra el borde
   redondeado: por eso se la deja SOBRESALIR a los dos lados en vez de
   calcularle el largo exacto.
   CALIBRACION. Lo que se ve de la banda NO es su ancho: es la cuerda que le
   corta la esquina, y esa cuerda mide exactamente el DOBLE de la distancia
   perpendicular entre la esquina y el borde de la banda. Con estos valores:
     borde exterior a 46px de la esquina -> 92px visibles
     "QUIERO COMPRAR" a 8.5px            -> ~65px
     sobran ~13px de aire a cada lado
   La distancia sale de (--faja-right + ancho/2 + --faja-top + alto/2) / v2, y
   no depende del ancho de la tarjeta: un solo juego de valores sirve para las
   tres columnas y para una sola. Si se agranda el texto, hay que alejar la
   banda (subir --faja-top) o se vuelve a comer las puntas.
   -------------------------------------------------------------------------- */
.faja {
  position: absolute; z-index: 4; pointer-events: none;
  top: var(--faja-top, 31px); right: var(--faja-right, -62px);
  width: var(--faja-ancho, 200px);
  padding: 5px 0;
  transform: rotate(45deg);
  text-align: center;
  background: linear-gradient(178deg, var(--oro-lt) 0%, var(--oro) 46%, #c08f42 100%);
  color: #1a0c22;
  font: 700 8.5px/1.35 var(--menu);
  letter-spacing: .05em; text-transform: uppercase;
  /* Dos filetes finos por dentro, como la placa dorada de las fichas. */
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset,
              0 -1px 0 rgba(26,12,34,.25) inset,
              0 3px 10px rgba(0,0,0,.4);
}
/* La banda es del color de la tarjeta al pasar el mouse: acompana el hover. */
.tarjeta:hover .faja { filter: brightness(1.07); }

/* --------------------------------------------------------------------------
   Mapa
   -------------------------------------------------------------------------- */
.mapa { margin-top: 40px; border: 1px solid var(--oro-dk); padding: 9px; }
.mapa iframe { display: block; width: 100%; height: 360px; border: 0; filter: grayscale(.3) saturate(.9); }
.banda .mapa { margin-top: 0; }
.banda .mapa iframe { height: 320px; }

/* --------------------------------------------------------------------------
   Prosa (nosotros)
   -------------------------------------------------------------------------- */
.prosa { max-width: 680px; margin: 0 auto; text-align: center; }
.prosa p { font-size: 18px; line-height: 1.75; color: var(--lav-lt); margin: 0 0 24px; }
.prosa .destacado { font: 400 26px/1.4 var(--serif); color: var(--crema); }

/* Variante para textos largos de lectura (privacidad y cualquier legal que
   se sume): alineado a la izquierda, con subtítulos y listas. Centrado se
   lee bien un párrafo suelto, pero no una página entera. */
.prosa--legal { max-width: 720px; text-align: left; }
.prosa--legal .destacado { text-align: center; }
.prosa--legal h2 {
  margin: 40px 0 14px;
  font: 400 22px/1.3 var(--serif); color: var(--crema);
}
.prosa--legal ul { margin: 0 0 24px; padding-left: 22px; }
.prosa--legal li {
  font-size: 17px; line-height: 1.7; color: var(--lav-lt); margin-bottom: 10px;
}
.prosa--legal li b { color: var(--crema); }
.prosa--legal small { font-size: 14px; color: var(--lav); }
.claro .prosa--legal h2 { color: var(--claro-ink); }
.claro .prosa--legal li { color: var(--claro-txt); }
.claro .prosa--legal li b { color: var(--claro-ink); }
.claro .prosa--legal small { color: var(--claro-txt); }
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.galeria .fr { padding: 8px; border: 1px solid var(--v600); }
.galeria img { width: 100%; height: 260px; object-fit: cover; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--v700); box-shadow: inset 0 1px 0 rgba(216,168,96,.18); padding: 46px 0 40px; }
.footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer h4 { margin: 0 0 14px; font: 400 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
.footer ul { margin: 0; padding: 0; list-style: none; font-size: 15px; }
.footer li { margin-bottom: 8px; }
.footer a { color: var(--lav); }
.footer a:hover { color: var(--crema); }
.footer__legal { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--v700); font-size: 13.5px; color: var(--lav); text-align: center; }

/* --------------------------------------------------------------------------
   WhatsApp flotante (solo mobile)
   -------------------------------------------------------------------------- */
.fab {
  display: flex; position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--wa); color: #fff; font-size: 25px;
  align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
  transition: background .18s, transform .18s;
}
.fab:hover { background: var(--wa-dk); transform: scale(1.06); }
/* El simbolo de WhatsApp, siempre visible: el boton flotante tiene que decir
   de que es sin que haga falta pasarle el mouse por encima. */
.fab__ico { width: 30px; height: 30px; color: #fff; }

/* Icono dentro de los botones de texto (header, CTAs) */
.ico-wa { width: 1.21em; height: 1.21em; flex: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .rubros { grid-template-columns: repeat(2, 1fr); }
  .pasos  { grid-template-columns: repeat(2, 1fr); gap: 34px 26px; }
  .piezas { grid-template-columns: repeat(2, 1fr); }
}

/* El menú pasa a hamburguesa antes que el resto del layout, para que los
   ítems nunca se partan en dos líneas ni pisen el botón de WhatsApp. */
@media (max-width: 1010px) {
  .hamb { display: block; }
  .header .btn-wa { display: none; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--v850); border-bottom: 1px solid var(--v700);
    padding: 8px var(--lado) 20px;
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .28s ease, visibility .28s;
  }
  .nav.abierto { max-height: 460px; visibility: visible; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--v700); font-size: 16px; }
  .nav a:last-child { border-bottom: 0; }
}

@media (max-width: 860px) {
  :root { --lado: 22px; }

  /* --- hero --- */
  .hero .wrap { padding-block: 44px 60px; }
  .hero__logo { max-width: 300px; }
  .hero h1 { font-size: 33px; }
  .hero__sub { font-size: 17px; }
  .acts { flex-direction: column; align-items: stretch; }
  .acts .b1, .acts .b2 { width: 100%; }

  /* --- confianza --- */
  .trust .wrap { grid-template-columns: 1fr; gap: 22px; padding-block: 26px; }
  .trust__it { padding: 0; border-left: 0; }

  /* --- secciones --- */
  .sec { padding: 60px 0; }
  .sechead h2 { font-size: 31px; }
  .rubros, .pasos, .piezas, .contacto { grid-template-columns: 1fr; }
  .pasos { gap: 30px; }

  /* --- banda --- */
  .banda .wrap { grid-template-columns: 1fr; gap: 32px; padding-block: 56px; }
  .banda h2 { font-size: 29px; }
  .banda__pic img { height: 240px; }
  .banda .b1 { width: 100%; }

  /* --- footer --- */
  .footer .wrap { grid-template-columns: 1fr; gap: 30px; }

  /* --- internas --- */
  .tarjetas { grid-template-columns: 1fr; }
  .tarjeta { padding: 28px 22px 24px; }
  .tarjeta__btns .b2, .tarjeta__btns .b1 { flex: 1 1 100%; }
  .pagehead h1 { font-size: 32px; }
  .pagehead .wrap { padding-block: 40px 38px; }
  .galeria { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 28px; }
  .sechead h2 { font-size: 27px; }
}

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