/* Guías de mesa-postres.nomnom.mx
   Copia los tokens y componentes de la portada (index.html) para que las guías se vean igual
   sin tocar el CSS de la portada. Si cambias un color o tipografía allá, cámbialo aquí también. */

:root {
  --bone: #F4EDE0;
  --warm: #FBF8F2;
  --ivory: #FDFAF4;
  --espresso: #1A0F0A;
  --coffee: #5C3D2E;
  --mocha: #8B6F5C;
  --rose: #C04438;
  --rose-deep: #9B2F26;
  --gold: #B89668;
  --hairline: rgba(26, 15, 10, 0.12);
  --hairline-strong: rgba(26, 15, 10, 0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  color: var(--espresso);
  background: var(--warm);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.nn-italic { font-style: italic; font-family: 'Fraunces', Georgia, serif; font-weight: 300; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.saltar {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--espresso); color: var(--ivory); padding: 10px 16px; border-radius: 4px;
}
.saltar:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

/* ===== Header (versión clara fija, igual al estado "scrolled" de la portada) ===== */
.header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 248, 242, 0.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 32px; max-width: 1280px; margin: 0 auto;
}
.logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.logo-img { height: 36px; width: auto; }
.nav { display: flex; gap: 32px; font-size: 14px; color: var(--coffee); }
.nav a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.3s;
}
.nav a:hover, .nav a[aria-current="page"] { background-size: 100% 1px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  border-radius: 999px; text-decoration: none; transition: background 0.3s, transform 0.3s;
  font-family: inherit; border: none; cursor: pointer;
}
.btn-sm { padding: 10px 20px; font-size: 13px; }
.btn-primary { background: var(--espresso); color: var(--ivory); }
.btn-primary:hover { background: var(--rose); }
.btn-rose { background: var(--rose); color: var(--ivory); }
.btn-rose:hover { background: var(--rose-deep); }
.btn-ghost-light { border: 1px solid rgba(253, 250, 244, 0.5); color: var(--ivory); background: transparent; }
.btn-ghost-light:hover { background: var(--ivory); color: var(--espresso); }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
@media (max-width: 768px) {
  .nav { display: none; }
  .logo-img { height: 30px; }
  .header-inner { padding: 12px 20px; }
}

/* ===== Cabecera de la guía ===== */
.guia-cabecera { background: var(--bone); border-bottom: 1px solid var(--hairline); padding: 48px 0 40px; }
.guia-cabecera .envoltura { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.migas { font-size: 13px; color: var(--mocha); margin-bottom: 28px; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.migas li + li::before { content: "/"; margin-right: 6px; color: var(--hairline-strong); }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--rose); }
.guia-ceja {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.25em;
  color: var(--rose); font-weight: 500; margin-bottom: 16px;
}
.guia-cabecera h1 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.06; letter-spacing: -0.015em;
  max-width: 820px; margin-bottom: 24px;
}
.guia-cabecera h1 .nn-italic { color: var(--rose); }
.respuesta-directa {
  font-size: 1.12rem; line-height: 1.65; color: var(--espresso);
  max-width: 780px; padding-left: 18px; border-left: 3px solid var(--rose); margin-bottom: 24px;
}
.firma { font-size: 13px; color: var(--mocha); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.firma strong { color: var(--coffee); font-weight: 500; }

/* ===== Foto principal ===== */
.guia-foto { max-width: 980px; margin: 32px auto 0; padding: 0 24px; }
.guia-foto img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px;
  background: var(--bone);
}
@media (max-width: 768px) { .guia-foto img { aspect-ratio: 4 / 5; } }
.guia-foto figcaption, .foto-media figcaption { font-size: 13px; color: var(--mocha); margin-top: 10px; line-height: 1.5; }

/* ===== Cuerpo ===== */
.guia-cuerpo { max-width: 980px; margin: 0 auto; padding: 40px 24px 72px; }
.guia-cuerpo > * { max-width: 780px; }
.guia-cuerpo .ancho { max-width: 100%; }
.guia-cuerpo h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.15rem); line-height: 1.12; letter-spacing: -0.01em;
  margin: 56px 0 16px; scroll-margin-top: 90px;
}
.guia-cuerpo h3 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 500;
  font-size: 1.25rem; margin: 32px 0 10px; scroll-margin-top: 90px;
}
.guia-cuerpo p, .guia-cuerpo li { font-size: 1.02rem; line-height: 1.72; color: var(--coffee); }
.guia-cuerpo p { margin-bottom: 16px; }
.guia-cuerpo strong { color: var(--espresso); font-weight: 600; }
.guia-cuerpo ul, .guia-cuerpo ol { margin: 0 0 18px 22px; }
.guia-cuerpo li { margin-bottom: 8px; }
.guia-cuerpo a { color: var(--rose-deep); text-underline-offset: 3px; }
.guia-cuerpo a:hover { color: var(--rose); }

.indice {
  background: var(--ivory); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 22px 26px; margin-bottom: 8px;
}
.indice p { font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--mocha); margin-bottom: 10px; }
.indice ol { margin: 0 0 0 20px; }
.indice li { font-size: 0.95rem; margin-bottom: 4px; }
.indice a { color: var(--espresso); text-decoration: none; }
.indice a:hover { color: var(--rose); text-decoration: underline; }

/* Tabla (igual a .comparison-table de la portada) */
.tabla {
  margin: 24px 0 28px; border: 1px solid var(--hairline-strong); border-radius: 4px;
  overflow-x: auto; background: var(--ivory);
}
.tabla table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 520px; }
.tabla caption { text-align: left; padding: 14px 18px 0; font-size: 0.85rem; color: var(--mocha); caption-side: top; }
.tabla th {
  background: var(--espresso); color: var(--ivory); padding: 14px 16px; text-align: left;
  font-weight: 500; font-size: 0.85rem; letter-spacing: 0.02em; vertical-align: bottom;
}
.tabla td { padding: 12px 16px; border-top: 1px solid var(--hairline); color: var(--coffee); line-height: 1.45; vertical-align: top; }
.tabla td:first-child { font-weight: 500; color: var(--espresso); background: var(--bone); }
.tabla .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 768px) {
  .tabla table { font-size: 0.84rem; }
  .tabla th, .tabla td { padding: 10px 12px; }
}

/* Recuadros */
.nota {
  background: var(--ivory); border: 1px solid var(--hairline); border-left: 3px solid var(--gold);
  border-radius: 4px; padding: 18px 22px; margin: 24px 0;
}
.nota p:last-child { margin-bottom: 0; }
.nota-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--mocha); margin-bottom: 8px; font-weight: 500; }
.nota.alerta { border-left-color: var(--rose); }

/* Lista numerada estilo checklist de la portada */
.pasos { list-style: none; margin: 24px 0 !important; counter-reset: paso; }
.pasos > li {
  counter-increment: paso; position: relative; padding: 16px 0 16px 48px;
  border-top: 1px solid var(--hairline-strong); margin: 0 !important;
}
.pasos > li::before {
  content: counter(paso, decimal-leading-zero); position: absolute; left: 0; top: 16px;
  font-family: 'Fraunces', Georgia, serif; font-style: italic; color: var(--rose); font-size: 0.95rem;
}
.pasos > li strong { display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.05rem; margin-bottom: 4px; }

.foto-media { margin: 28px 0; }
.foto-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }

/* Preguntas visibles (sin FAQPage: Google retiró el resultado enriquecido) */
.preguntas { border-top: 1px solid var(--hairline-strong); margin-top: 8px; }
.pregunta { border-bottom: 1px solid var(--hairline-strong); padding: 20px 0; }
.pregunta h3 { margin: 0 0 8px !important; font-size: 1.12rem !important; }
.pregunta p:last-child { margin-bottom: 0; }

/* Fuentes */
.fuentes { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.fuentes h2 { font-size: 1.25rem !important; margin-top: 0 !important; }
.fuentes li, .fuentes p { font-size: 0.88rem !important; color: var(--mocha) !important; }

/* Sigue leyendo */
.relacionadas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
@media (max-width: 800px) { .relacionadas { grid-template-columns: 1fr; } }
.relacionadas a {
  display: block; text-decoration: none; padding: 20px 22px; background: var(--ivory);
  border: 1px solid var(--hairline); border-radius: 4px; color: var(--espresso) !important;
  transition: border-color 0.25s, transform 0.25s;
}
.relacionadas a:hover { border-color: var(--rose); transform: translateY(-2px); }
.relacionadas span { display: block; font-size: 0.85rem; color: var(--mocha); margin-top: 6px; line-height: 1.5; }
.relacionadas b { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.05rem; }

/* Índice de guías */
.lista-guias { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 32px 0; max-width: 100% !important; }
@media (max-width: 760px) { .lista-guias { grid-template-columns: 1fr; } }
.tarjeta-guia {
  display: flex; flex-direction: column; text-decoration: none; background: var(--ivory);
  border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden; color: var(--espresso) !important;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.tarjeta-guia:hover { border-color: var(--rose); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26, 15, 10, 0.06); }
.tarjeta-guia img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tarjeta-guia .txt { padding: 20px 22px 24px; }
.tarjeta-guia h2 { font-size: 1.3rem !important; margin: 0 0 8px !important; }
.tarjeta-guia p { font-size: 0.93rem !important; margin: 0 !important; }

/* ===== CTA final (igual a la portada) ===== */
.cta-final { padding: 80px 24px; background: var(--espresso); color: var(--ivory); text-align: center; }
.cta-final-inner { max-width: 760px; margin: 0 auto; }
.cta-final-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.3em; color: var(--gold); margin-bottom: 20px; }
.cta-final h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; line-height: 1.05; font-size: clamp(2.1rem, 5vw, 3.6rem); margin-bottom: 24px; }
.cta-final h2 .nn-italic { color: var(--gold); }
.cta-final p { font-size: 1.08rem; max-width: 560px; margin: 0 auto 32px; color: rgba(253, 250, 244, 0.75); }
.cta-final .acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta-final .meta { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(253, 250, 244, 0.15); font-size: 0.875rem; color: rgba(253, 250, 244, 0.65); }

/* ===== Footer (igual al pie principal de la portada) ===== */
.footer { background: var(--ivory); padding: 56px 0 48px; border-top: 1px solid var(--hairline); }
.footer-grid { display: grid; grid-template-columns: 4fr 2fr 3fr 3fr; gap: 32px; margin-bottom: 40px; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } }
.footer-logo-img { height: 48px; width: auto; margin-bottom: 16px; }
.footer-about { font-size: 0.875rem; line-height: 1.6; color: var(--coffee); }
.footer-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--mocha); margin-bottom: 16px; }
.footer-list { list-style: none; }
.footer-list li { font-size: 0.875rem; color: var(--coffee); margin-bottom: 8px; }
.footer-list a { text-decoration: none; }
.footer-list a:hover { text-decoration: underline; }
.footer-bottom {
  padding-top: 28px; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-size: 0.75rem; color: var(--mocha);
}

/* ===== Barra de contacto en celular ===== */
.barra-movil { display: none; }
@media (max-width: 768px) {
  .barra-movil {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--ivory); border-top: 1px solid var(--hairline-strong);
    box-shadow: 0 -4px 16px rgba(26, 15, 10, 0.08);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  .barra-movil a {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 13px 10px; font-size: 13.5px; font-weight: 500; border-radius: 2px; text-decoration: none; color: var(--ivory);
  }
  .barra-movil svg { width: 16px; height: 16px; }
  .barra-movil .wa { background: #17753d; }
  .barra-movil .form { background: var(--rose); }
  body { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}