/* ==========================================================================
   MASTEROIA — HOJA DE ESTILOS DEL BLOG
   --------------------------------------------------------------------------
   Las páginas del blog NO las construye Next: las genera el panel
   (Emails/includes/blog.php) como HTML estático. Por eso no pueden enlazar el
   CSS de Next, cuyo nombre lleva un hash que cambia en cada build.

   Este archivo vive en public/ → se publica en /assets/blog.css con una ruta
   ESTABLE, y reproduce los tokens de src/styles/tokens.css y la tipografía de
   LegalShell.module.css / Footer.module.css con nombres de clase planos.

   Si cambias el diseño del sitio, actualiza también este archivo y pulsa
   "Regenerar todo" en el panel.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

:root {
  --color-black:      #0a0e14;
  --color-dark:       #0f1520;
  --color-teal:       #5ec4cc;
  --color-teal-light: #8ddde3;
  --color-white:      #ffffff;
  --color-white-70:   rgba(255, 255, 255, 0.70);
  --color-white-40:   rgba(255, 255, 255, 0.40);
  --color-white-15:   rgba(255, 255, 255, 0.15);

  --font-body: 'Montserrat', sans-serif;

  --text-xs:  11px;
  --text-sm:  13px;
  --text-base: 15px;
  --text-md:  18px;
  --text-lg:  24px;
  --text-xl:  32px;
  --text-2xl: 42px;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-semi:    600;
  --weight-bold:    700;

  --leading-tight:  1.12;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-wide:   0.06em;
  --tracking-widest: 0.18em;

  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;
  --space-2xl: 120px;

  --max-width:  1280px;
  --nav-height: 80px;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
}

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

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* ── Barra superior (igual que LegalShell) ─────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 14, 20, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-white-15);
}

.topbarInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

.topbarLogo img { height: 40px; width: auto; }

.topbarLinks { display: flex; gap: var(--space-md); }

.topbarLink {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--color-white-70);
  transition: color var(--duration-fast) var(--ease-out);
}

.topbarLink:hover { color: var(--color-teal); }

/* ── Cuerpo de página ──────────────────────────────────────────────────── */
.page {
  padding-block: var(--space-2xl);
  background: var(--color-dark);
}

.doc { max-width: 80ch; margin-inline: auto; }

.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--space-sm);
}

.title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.intro {
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  color: var(--color-white-70);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-xl);
}

/* Foto de portada del artículo.
   height:auto es imprescindible: los atributos width/height del <img> (que se
   mantienen para reservar espacio y evitar saltos de layout) ganarían a
   aspect-ratio y la imagen saldría deformada. */
.cover {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-white-15);
  margin-bottom: var(--space-xl);
}

/* ── Tipografía del cuerpo del artículo ────────────────────────────────── */
.doc h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.doc h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--color-teal);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.doc p,
.doc li {
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  color: var(--color-white-70);
  line-height: var(--leading-loose);
}

.doc p { margin-bottom: var(--space-sm); }

.doc ul, .doc ol {
  list-style: disc;
  padding-left: 1.4em;
  margin-bottom: var(--space-md);
}

.doc ol { list-style: decimal; }
.doc li { margin-bottom: var(--space-xs); }

.doc a {
  color: var(--color-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.doc a:hover { color: var(--color-teal-light); }

.doc strong { color: var(--color-white); font-weight: var(--weight-semi); }
.doc em { font-style: italic; }

/* Cita destacada dentro del artículo. */
.doc blockquote {
  border-left: 2px solid var(--color-teal);
  padding-left: var(--space-md);
  margin: var(--space-lg) 0;
}

.doc blockquote p {
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  font-style: italic;
  color: var(--color-white);
  margin-bottom: 0;
}

/* Bloque resaltado (idea clave, aviso, resumen). */
.doc .destacado {
  background: var(--color-black);
  border: 1px solid var(--color-white-15);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.doc .destacado p:last-child { margin-bottom: 0; }

/* Imagen intercalada con pie. */
.doc figure { margin: var(--space-lg) 0; }

.doc figure img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-white-15);
}

.doc figcaption {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-white-40);
  text-align: center;
}

/* Tablas. */
.doc .tableWrap {
  overflow-x: auto;
  margin-bottom: var(--space-lg);
  border: 1px solid var(--color-white-15);
  border-radius: var(--radius-md);
}

.doc table { width: 100%; border-collapse: collapse; min-width: 560px; }

.doc th, .doc td {
  text-align: left;
  padding: 10px 14px;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  border-bottom: 1px solid var(--color-white-15);
  vertical-align: top;
}

.doc th {
  font-weight: var(--weight-semi);
  color: var(--color-white);
  background: rgba(94, 196, 204, 0.08);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--text-xs);
}

.doc td { color: var(--color-white-70); font-weight: var(--weight-light); }
.doc tr:last-child td { border-bottom: none; }

/* ── CTA final (mismo aspecto que .faqCta del sitio) ───────────────────── */
.faqCta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.faqCta a {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
}

.faqCta .primary { background: var(--color-teal); color: var(--color-black); }
.faqCta .outline { border: 1px solid var(--color-white-15); color: var(--color-white); }
.faqCta .outline:hover { border-color: var(--color-teal); }

/* ── Listado de artículos (/blog) ──────────────────────────────────────── */
.postGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
  max-width: var(--max-width);
  margin-top: var(--space-lg);
}

.post {
  display: flex;
  flex-direction: column;
  background: var(--color-black);
  border: 1px solid var(--color-white-15);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.post:hover { border-color: var(--color-teal); transform: translateY(-3px); }

.postImg {
  width: 100%;
  height: auto; /* ver nota en .cover */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--color-white-15);
}

.postBody {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  flex: 1;
}

.postMeta {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-teal);
}

.postTitle {
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--color-white);
  line-height: var(--leading-normal);
}

.postExcerpt {
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  color: var(--color-white-70);
  line-height: var(--leading-loose);
}

.postMore {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-teal);
}

.empty {
  margin-top: var(--space-lg);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  color: var(--color-white-40);
}

/* ── Pie de página (copia de Footer.module.css) ────────────────────────── */
.footer {
  background: var(--color-black);
  border-top: 1px solid var(--color-white-15);
  padding-block: var(--space-2xl) var(--space-lg);
}

.footerTop {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-white-15);
}

.brandCol { display: flex; flex-direction: column; gap: var(--space-md); }
.brandCol .logo img { height: 44px; width: auto; }

.tagline {
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  color: var(--color-white-70);
  line-height: var(--leading-normal);
  max-width: 38ch;
}

.social { display: flex; gap: var(--space-xs); }

.socialLink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-white-15);
  color: var(--color-white-70);
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.socialLink:hover {
  color: var(--color-teal);
  border-color: var(--color-teal);
  transform: translateY(-2px);
}

.col { display: flex; flex-direction: column; gap: var(--space-md); }

.colTitle {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-white-40);
}

.linkList { display: flex; flex-direction: column; gap: var(--space-sm); }

.footerLink {
  font-size: var(--text-sm);
  color: var(--color-white-70);
  transition: color var(--duration-fast) var(--ease-out);
}

.footerLink:hover { color: var(--color-teal); }

.address {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-white-70);
  line-height: var(--leading-normal);
}

.company { font-weight: var(--weight-semi); color: var(--color-white); }

.sede {
  margin-top: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-teal);
}

.contactItem {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-white-70);
  transition: color var(--duration-fast) var(--ease-out);
}

.contactItem svg { flex-shrink: 0; color: var(--color-teal); }
.contactItem:hover { color: var(--color-teal); }

.footerBottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding-top: var(--space-lg);
}

.copyright, .legalMeta { font-size: var(--text-xs); color: var(--color-white-40); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footerTop { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .brandCol { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .container { padding-inline: var(--space-md); }
  .page { padding-block: var(--space-xl); }
  .title { font-size: var(--text-xl); }
  .footer { padding-block: var(--space-xl) var(--space-md); }
  .footerTop { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footerBottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}