/* Hora y Oro — hoja de estilos compartida por las siete páginas del sitio
   (index, alianzas, marcas, taller, joya-aragonesa, catalogo, tienda). Sin
   paso de compilación: un único fichero, versionado a mano (?v=N en el
   <link> de cada página — ver CLAUDE.md, "Caché: HTML siempre fresco,
   CSS/JS versionado") y no repartido en módulos por página.
   Dirección de arte: premium por espacio, tipografía y ritmo — no por dorado
   y serifas por todas partes (BRIEF §7). Playfair Display para titulares,
   Inter para el resto. El dorado se reserva a acentos grandes, botones e
   iconos: en texto pequeño sobre fondo claro no pasa AA, así que las
   etiquetas ("kicker") usan el bronce, más oscuro. */

/* Tipografía alojada en el propio repo (fuentes/), no en Google Fonts:
   BRIEF §11 pide "sin cookies de terceros", y no tenía sentido aplazar la
   carga del mapa por eso y mandar la IP de cada visitante a Google en toda
   petición de página. Ficheros descargados del CSS real que servía
   fonts.googleapis.com para estas familias/pesos, quedándonos solo con el
   subset "latin" (U+0000-00FF y compañía: cubre ñ/á/é/í/ó/ú/ü/¿/¡, que es
   todo lo que hace falta en español) — los subsets cyrillic/greek/
   vietnamese que también sirve Google no aportan nada aquí y solo pesan.
   Un mismo fichero .woff2 sirve varios pesos porque es una fuente variable
   y así lo servía ya el propio Google (comprobado en el CSS descargado):
   no es un error, es la misma estructura que ya estaba funcionando. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fuentes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fuentes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fuentes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fuentes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fuentes/playfair-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fuentes/playfair-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fuentes/playfair-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --marfil: #F7F3EC;
  --champan: #EFE6D8;
  --dorado: #C6A15B;
  --dorado-suave: #DCC48F;
  --bronce: #7C5E36;
  --carbon: #1C1A17;
  --bg: var(--marfil);
  --surface: #FFFFFF;
  --line: #E4D9C7;
  --text: var(--carbon);
  --muted: #6F685F;
  --accent: var(--dorado);
  --accent-deep: var(--bronce);
  --whatsapp-verde: #1F7A52;
  --radius: 4px;
  --container: min(1180px, calc(100% - 48px));
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

h1,
h2,
h3,
p,
ul,
dl,
dd,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: 0.01em;
  font-weight: 600;
  line-height: 1.15;
}

ul {
  list-style: none;
  padding: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.kicker {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-deep);
}

/* ---------- Cabecera ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 243, 236, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.brand img {
  height: 100px;
  width: auto;
  object-fit: contain;
}


.menu {
  display: flex;
  gap: clamp(14px, 2.4vw, 30px);
  overflow-x: auto;
  scrollbar-width: none;
  font-size: 0.88rem;
  font-weight: 500;
}

.menu::-webkit-scrollbar {
  display: none;
}

.menu a {
  white-space: nowrap;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.menu a:hover {
  border-color: var(--accent-deep);
}

/* Sección activa: borde sólido y color más oscuro que el hover */
.menu a.menu-activo {
  border-color: var(--accent-deep);
  color: var(--accent-deep);
  font-weight: 600;
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--whatsapp-verde);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-whatsapp:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(31, 122, 82, 0.28);
}

.btn-whatsapp svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.menu-row {
  border-top: 1px solid var(--line);
  padding-block: 10px;
}

.menu-toggle {
  display: none;
}

/* ---------- Hero ---------- */

.hero {
  overflow: hidden;
  padding-block: 0;
  background: var(--bg);
}

/* Grid de dos columnas: texto a la izquierda, foto a la derecha.
   La foto NO llena la columna — tiene tamaño propio contenido dentro de ella.
   El grid se dimensiona por el contenido del texto, no por la imagen. */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  padding-block: clamp(48px, 6vw, 80px);
  padding-left: max(calc((100vw - min(1180px, 100vw - 48px)) / 2), 24px);
  padding-right: max(calc((100vw - min(1180px, 100vw - 48px)) / 2), 24px);
  background:
    radial-gradient(ellipse 60% 80% at 0% 40%, rgba(198, 161, 91, 0.11), transparent 60%),
    var(--bg);
}

/* ---- Columna de texto ---- */
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 560px;
}

.hero-copy .kicker {
  margin-bottom: 16px;
}

.hero-copy h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1.12;
  max-width: 16ch;
}

.hero-copy .lead {
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: var(--muted);
  max-width: 46ch;
  margin-top: 18px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}

/* CTA principal del hero: más presencia que un link-arrow */
.btn-hero {
  display: inline-flex;
  align-items: center;
  background: var(--accent-deep);
  color: #fff;
  padding: 13px 28px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-hero:hover {
  background: #5e4626;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 94, 54, 0.30);
}

.link-arrow {
  font-weight: 600;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--accent-deep);
  padding-bottom: 2px;
  color: var(--accent-deep);
  transition: color 0.15s ease;
}

.link-arrow:hover {
  color: #5e4626;
}

/* ---- Columna de imagen ---- */
/* La imagen tiene tamaño fijo y flota centrada — NO llena la columna.
   Esto evita que la foto domine sobre el texto. */
.hero-imagen {
  flex-shrink: 0;
  width: clamp(200px, 22vw, 300px);
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--carbon);
  box-shadow: 0 12px 40px rgba(28, 26, 23, 0.14);
}

.hero-imagen picture {
  display: contents;
}

.hero-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  animation: hero-imagen-entrada 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hero-imagen-entrada {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* prefers-reduced-motion: la animación ya está desactivada por la regla
   global del * de arriba, no hace falta repetirla aquí. */

/* ---- Hero responsive ---- */

@media (max-width: 960px) {
  .hero-imagen {
    width: clamp(160px, 20vw, 240px);
  }
}

/* Móvil: foto debajo del texto, centrada */
@media (max-width: 640px) {
  .hero-layout {
    grid-template-columns: 1fr;
    padding-inline: 24px;
    gap: 28px;
  }

  .hero-copy {
    order: 1;
    max-width: 100%;
  }

  .hero-imagen {
    order: 2;
    width: clamp(140px, 48vw, 200px);
    margin-inline: auto;
  }

  .hero-copy h1 {
    max-width: 100%;
  }
}

/* ---------- Secciones genéricas ---------- */

section {
  padding-block: clamp(56px, 9vw, 104px);
}

.section-head {
  max-width: 640px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

/* h2 en la mayoría de páginas; h1 en joya-aragonesa.html, la única cuya
   cabecera vive dentro de .section-head en vez de en .page-header (por el
   layout de dos columnas de .aragon-body). */
.section-head h1,
.section-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin-top: 12px;
}

.section-head p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 1.05rem;
}

.section-alt {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

/* ---------- Botón contorno (dorado-suave sobre fondo oscuro) ---------- */
/* Usado en .flagship-teaser (portada) y en la CTA de alianzas.html. */

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--dorado-suave);
  color: var(--marfil);
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-outline:hover {
  background: var(--dorado-suave);
  color: var(--carbon);
}

/* ---------- Marcas ---------- */

.marcas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.marca-item {
  background: var(--surface);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.marca-item strong {
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
}

.marca-item span {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

@media (max-width: 760px) {
  .marcas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .marcas-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Taller ---------- */

/* Sección sin clase propia: fondo marfil (--bg) heredado, padding de section{} */

.taller-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.taller-item {
  padding-top: 20px;
  border-top: 2px solid var(--accent);
}

.taller-item h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.taller-item p {
  color: var(--muted);
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .taller-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .taller-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Joya aragonesa ---------- */

.aragon {
  background:
    linear-gradient(135deg, var(--champan), var(--marfil));
}

.aragon-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: start;
}

.aragon-body p {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--text);
}

.aragon .section-head {
  margin-bottom: 0;
}

.aragon-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.aragon-tags li {
  border: 1px solid var(--accent-deep);
  color: var(--accent-deep);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.86rem;
  font-weight: 600;
}

@media (max-width: 760px) {
  .aragon-body {
    grid-template-columns: 1fr;
  }
}

/* ---------- Tienda ---------- */

/* Sección sin clase propia: fondo marfil (--bg) heredado, padding de section{} */

.tienda-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.tienda-foto {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  max-width: 420px;
}

.tienda-foto img {
  width: 100%;
  height: auto;
}

.tienda-info dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 20px;
  font-size: 1rem;
}

.tienda-info dt {
  font-weight: 600;
  color: var(--accent-deep);
}

.tienda-info dd {
  color: var(--text);
}

.mapa-card {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.mapa-placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  background:
    repeating-linear-gradient(0deg, var(--champan) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, var(--champan) 0 1px, transparent 1px 32px),
    var(--marfil);
}

.mapa-placeholder iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.mapa-nota {
  font-size: 0.78rem;
  color: var(--muted);
  max-width: 32ch;
}

.btn-mapa {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--accent-deep);
  color: var(--accent-deep);
  background: transparent;
  font: inherit;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-mapa:hover {
  background: var(--accent-deep);
  color: #fff;
}

.como-llegar {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: 1px solid var(--accent-deep);
}

@media (max-width: 767px) {
  /* En pantallas pequeñas, la navegación se abre con el botón superior. */
  .navbar {
    padding-block: 10px;
  }

  .btn-whatsapp {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .menu-row {
    position: relative;
    padding-block: 8px;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
  }

  .menu-toggle-icon {
    display: grid;
    gap: 4px;
    width: 24px;
  }

  .menu-toggle-icon span {
    display: block;
    height: 2px;
    background: currentColor;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle-icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .menu {
    display: none;
    flex-direction: column;
    gap: 0;
    padding-top: 6px;
  }

  .menu.menu-abierto {
    display: flex;
  }

  .menu a {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }

  /* En móvil el activo lleva el color bronce además del borde */
  .menu a.menu-activo {
    color: var(--accent-deep);
    border-bottom-color: var(--accent-deep);
  }

  .tienda-grid {
    grid-template-columns: 1fr;
  }
  .tienda-foto {
    max-width: 320px;
  }
}

/* ---------- Catálogo ---------- */

/* Sección sin clase propia: fondo marfil (--bg) heredado, padding de section{} */

/* Estados: cargando / vacío / error */
.catalogo-estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-block: 56px;
  text-align: center;
  color: var(--muted);
  font-size: 1rem;
}

.catalogo-vacio-texto {
  font-size: 1.05rem;
  color: var(--text);
}

/* Spinner minimalista */
.catalogo-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--line);
  border-top-color: var(--accent-deep);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* Grid de tarjetas:
   auto-fill con mínimo 260px — se ajusta solo sin breakpoints explícitos
   para la mayoría de anchos; los dos media queries de abajo solo fuerzan
   el comportamiento en los extremos. */
.catalogo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
}

@media (max-width: 580px) {
  .catalogo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 360px) {
  .catalogo-grid {
    grid-template-columns: 1fr;
  }
}

/* Tarjeta individual */
.tarjeta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tarjeta:hover {
  box-shadow: 0 8px 28px rgba(28, 26, 23, 0.09);
  transform: translateY(-2px);
}

/* Figura: proporción 4:5, igual que el recorte del pipeline de imagen */
.tarjeta-figura {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--champan);
}

/* Placeholder blur-up: <img> real con el base64, no background-image por
   JS. .htaccess exige style-src 'self' sin 'unsafe-inline' (CSP, BRIEF
   §10); un elemento.style.backgroundImage puesto desde JS cae bajo esa
   misma restricción y el navegador lo bloquea en silencio -- el efecto
   simplemente no se veía, sin error visible para quien navega. Un <img>
   con su src en data: URI lo cubre img-src 'self' data:, que sí estaba
   permitido, así que el placeholder vuelve a funcionar sin tocar la CSP. */
.tarjeta-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(16px);
  transform: scale(1.15);
}

.tarjeta-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Empieza invisible; se desvanece al cargar (clase --cargada) */
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* El <picture> generado por JS también debe cubrir la figura */
.tarjeta-figura picture {
  position: absolute;
  inset: 0;
  display: block;
}

.tarjeta-figura--cargada .tarjeta-img {
  opacity: 1;
}

/* Sin imagen: fondo champán con iniciales en Playfair */
.tarjeta-figura--sin-foto {
  background: var(--champan);
}

.tarjeta-sin-imagen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 600;
  color: var(--accent-deep);
  opacity: 0.45;
  user-select: none;
}

/* Cuerpo de la tarjeta */
.tarjeta-cuerpo {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}

.tarjeta-categoria {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.tarjeta-nombre {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  /* Trunca a 2 líneas para mantener la cuadrícula alineada */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pie de tarjeta: precio a la izquierda, botón WhatsApp a la derecha */
.tarjeta-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}

.tarjeta-precio {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.tarjeta-precio--consultar {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--accent-deep);
}

/* Botón WhatsApp compacto por tarjeta */
.tarjeta-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--whatsapp-verde);
  color: #fff;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}

.tarjeta-wa:hover {
  background: #185f3e;
  transform: scale(1.08);
}

/* ---------- Pie ---------- */

.footer {
  border-top: 1px solid var(--line);
}

/* .footer-inner es el .container que centra el contenido y
   distribuye logo y contacto en los extremos. */
.footer-inner {
  padding-block: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-brand img {
  height: 42px;
  width: auto;
}

.footer-brand p {
  font-size: 0.9rem;
  color: var(--muted);
}

.footer-contact {
  font-size: 0.9rem;
  color: var(--muted);
  text-align: right;
}

.footer-contact a {
  color: var(--accent-deep);
  font-weight: 600;
}

@media (max-width: 640px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .footer-contact {
    text-align: left;
  }
}

/* ============================================================================
   SITIO MULTIPÁGINA: cada sección de la antigua página única vive ahora en
   su propio fichero (index.html es la portada; alianzas/marcas/taller/
   joya-aragonesa/catalogo/tienda.html, cada una la suya). Los estilos de
   más abajo son los que ese cambio necesitó: cabecera de página, teasers
   de portada, el enlace de Alianzas destacado en el menú de TODAS las
   páginas (BRIEF.md §9: "entrada permanente en el menú principal"), y la
   franja de enlaces cruzados al final de cada página propia.
   ============================================================================ */

/* ---------- Menú: Alianzas con tratamiento propio en toda la web ---------- */
/* No es solo la página de alianzas la que destaca -- BRIEF §9 pide que el
   producto de más valor de la tienda tenga presencia permanente, así que
   su entrada de menú lleva más peso que las demás en cualquier página. */
.menu a.menu-flagship {
  color: var(--accent-deep);
  font-weight: 700;
}

/* ---------- Cabecera de página propia ---------- */
/* Sustituye al .section-head de dentro de una <section id="..."> de la
   antigua página única: aquí es la cabecera de la página entera, así que
   el titular es h1, no h2. */
.page-header {
  padding-block: clamp(48px, 7vw, 76px) clamp(28px, 4vw, 44px);
}

.page-header .kicker {
  margin-bottom: 14px;
}

.page-header h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
}

.page-header p {
  margin-top: 18px;
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 60ch;
}

/* ---------- Portada: banda destacada de Alianzas ---------- */
/* Mismo tratamiento carbón/dorado que la sección de alianzas original,
   reutilizado aquí como teaser de portada hacia alianzas.html -- es la
   pieza central de "destacando la de alianzas" en el hub de portada. */
.flagship-teaser {
  background: var(--carbon);
  color: var(--marfil);
  padding-block: clamp(56px, 9vw, 96px);
}

.flagship-teaser .kicker {
  color: var(--dorado-suave);
}

.flagship-teaser h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  max-width: 20ch;
  margin-top: 14px;
}

.flagship-teaser p {
  margin-top: 18px;
  max-width: 56ch;
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(247, 243, 236, 0.82);
}

.flagship-teaser .btn-outline {
  margin-top: 28px;
}

/* ---------- Portada: teasers al resto de páginas ---------- */
.teasers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.teaser-card {
  background: var(--surface);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 0.15s ease;
}

.teaser-card:hover {
  background: var(--champan);
}

.teaser-card h3 {
  font-size: 1.25rem;
}

.teaser-card p {
  color: var(--muted);
  font-size: 0.95rem;
  flex: 1;
}

.teaser-card .link-arrow {
  align-self: flex-start;
}

@media (max-width: 480px) {
  .teasers {
    grid-template-columns: 1fr;
  }
}

/* ---------- Alianzas: hero editorial de su propia página ---------- */
/* alianzas.html no tiene foto real disponible todavía (BRIEF §4: los
   originales de producto viven fuera del document root y el catálogo real
   no se ha cargado aún) -- el motivo de un ring-mark tipográfico en vez de
   una fotografía de alianzas. */
.alianzas-hero {
  background: var(--carbon);
  color: var(--marfil);
  padding-block: clamp(64px, 10vw, 112px);
}

.alianzas-hero .kicker {
  color: var(--dorado-suave);
}

.alianzas-hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  max-width: 18ch;
  margin-top: 16px;
}

.alianzas-hero .lead {
  margin-top: 20px;
  max-width: 58ch;
  font-size: 1.12rem;
  line-height: 1.75;
  color: rgba(247, 243, 236, 0.85);
}

.alianzas-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}

/* Variante clara de .link-arrow para usar sobre fondo carbón (el bronce de
   la variante normal no da suficiente contraste ahí). */
.link-arrow--claro {
  color: var(--dorado-suave);
  border-bottom-color: var(--dorado-suave);
}

.link-arrow--claro:hover {
  color: var(--marfil);
  border-bottom-color: var(--marfil);
}

/* Marca ornamental: dos aros entrelazados, trazo fino en dorado. Sustituye
   a una fotografía que todavía no existe (ver comentario de .alianzas-hero
   arriba) sin recurrir a una imagen de stock genérica. */
.alianzas-marca {
  margin-top: 40px;
  opacity: 0.9;
}

.alianzas-marca svg {
  width: 64px;
  height: 40px;
}

/* ---------- Alianzas: contenido editorial (BRIEF §9) ---------- */
.alianzas-criterios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.alianzas-criterio {
  padding-top: 18px;
  border-top: 2px solid var(--accent);
}

.alianzas-criterio h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.alianzas-criterio p {
  color: var(--muted);
  font-size: 0.95rem;
}

.alianzas-dudas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 4vw, 40px);
}

.alianzas-duda h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.alianzas-duda p {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.65;
}

.alianzas-cta {
  background: var(--champan);
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}

.alianzas-cta p {
  font-size: 1.05rem;
  max-width: 42ch;
}

.alianzas-cta-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}

/* ---------- Sigue explorando (pie de cada página propia) ---------- */
.explora {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: clamp(40px, 6vw, 64px);
}

.explora .kicker {
  margin-bottom: 20px;
}

.explora-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
}

.explora-links a {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.explora-links a:hover {
  border-color: var(--accent-deep);
}