/* Estilo compartido de las guías de Amana — réplica fiel de la estética de la portada:
   tarjeta héroe con vídeo, píldora de navegación, y el cuerpo dentro de un panel centrado
   como la sección "Somos Amana" (etiqueta en mayúsculas, títulos grandes con cursiva serif). */
:root {
  --crema: #E1E0CC;
  --crema-boton: #DEDBC8;
  --teal: #12BFA6;
  --gris: #9AA3AF;
  --gris-oscuro: #6B7280;
  --fondo: #000000;
  --panel: #101010;
  --tarjeta: #212121;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  /* La misma pila de fuentes que la portada (src/index.css) */
  font-family: 'Almarai', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  background: var(--fondo);
  color: var(--crema);
  line-height: 1.6;
}
em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
}

/* Logo fijo arriba a la izquierda, visible en todo momento (se encoge con guias.js) */
a.logo-fijo {
  position: fixed; top: 1rem; left: 1rem; z-index: 50;
  display: block; transform-origin: top left; will-change: transform;
}
a.logo-fijo img {
  height: 44px; width: auto; display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}
@media (min-width: 768px) {
  a.logo-fijo { top: 1.5rem; left: 1.5rem; }
  a.logo-fijo img { height: 64px; }
}

/* ── Héroe: la misma tarjeta redondeada con vídeo, ruido y degradado de la portada ── */
.hero-guia { padding: 1rem; }
@media (min-width: 768px) { .hero-guia { padding: 1.5rem; } }
.hero-tarjeta {
  position: relative; overflow: hidden;
  border-radius: 1rem;
  min-height: clamp(26rem, 72vh, 44rem);
  display: flex; flex-direction: column;
}
@media (min-width: 768px) { .hero-tarjeta { border-radius: 2rem; } }
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero-tarjeta::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.7; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
.hero-tarjeta::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.78));
}

/* Píldora de navegación pegada arriba, idéntica a la de la portada */
nav.pildora {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 0.75rem;
  background: #000; padding: 0.55rem 1rem;
  border-radius: 0 0 1rem 1rem;
  max-width: calc(100% - 1rem);
}
@media (min-width: 640px) { nav.pildora { gap: 1.5rem; } }
@media (min-width: 768px) { nav.pildora { gap: 3rem; padding: 0.6rem 2rem; border-radius: 0 0 1.5rem 1.5rem; } }
nav.pildora a {
  color: rgba(225, 224, 204, 0.8); text-decoration: none;
  font-size: 10px; white-space: nowrap; transition: color 0.2s;
}
@media (min-width: 640px) { nav.pildora a { font-size: 12px; } }
@media (min-width: 768px) { nav.pildora a { font-size: 14px; } }
nav.pildora a:hover { color: var(--crema); }

.hero-contenido {
  position: relative; z-index: 2; margin-top: auto;
  padding: 6rem 1.25rem 2rem; max-width: 52rem;
}
@media (min-width: 768px) { .hero-contenido { padding: 7rem 2.5rem 2.75rem; } }
.hero-contenido h1 {
  /* Mismos valores que el titular de la portada: peso 500, interlineado 1.25,
     sin espaciado negativo, tope 3rem (text-5xl) */
  font-size: clamp(1.5rem, 3.8vw, 3rem); line-height: 1.25;
  font-weight: 500; letter-spacing: normal; margin-bottom: 0.75rem;
  animation: subir 0.9s var(--curva) both;
}
.hero-contenido p.entradilla {
  color: rgba(225, 224, 204, 0.8);
  font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 38rem; line-height: 1.5;
  animation: subir 0.9s var(--curva) 0.15s both;
}
@keyframes subir {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* ── Cuerpo de la guía: panel centrado como la sección "Somos Amana" de la portada ── */
main.guia {
  width: calc(100% - 2rem); max-width: 72rem;
  margin: 0.5rem auto 0;
  background: var(--panel);
  border-radius: 1rem;
  padding: 3.5rem 1.5rem 4rem;
}
@media (min-width: 768px) {
  main.guia { width: calc(100% - 3rem); border-radius: 2rem; padding: 5.5rem 4rem 6rem; }
}
/* La etiqueta en mayúsculas de la portada, arriba del panel */
main.guia::before {
  content: 'Copias de seguridad gestionadas';
  display: block; text-align: center;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--crema); margin-bottom: 2.5rem;
}
main.guia h2 {
  /* Como los títulos de sección de la portada: peso normal, sin espaciado negativo */
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  margin: 3rem auto 1.2rem; max-width: 46rem;
  color: var(--crema); font-weight: 400; letter-spacing: normal;
  line-height: 1.2; text-align: center;
}
main.guia h2:first-of-type { margin-top: 0; }
main.guia p, main.guia ul, main.guia ol {
  max-width: 42rem; margin: 0 auto 1rem;
  color: var(--gris); font-size: 0.95rem;
}
@media (min-width: 768px) { main.guia p, main.guia ul, main.guia ol { font-size: 1rem; } }
main.guia ul, main.guia ol { padding-left: 1.3rem; }
main.guia li { margin-bottom: 0.45rem; }
main.guia strong { color: var(--crema); font-weight: 700; }
main.guia a { color: var(--teal); text-decoration: none; }
main.guia a:hover { text-decoration: underline; }

/* Aparición al entrar en pantalla (guias.js), como las animaciones de la portada */
.revela { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--curva), transform 0.9s var(--curva); }
.revela.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; transition: none; }
  .hero-contenido h1, .hero-contenido p.entradilla { animation: none; }
}

/* Llamada a la acción: tarjeta gris como las de los 3 pilares + botón "Pide una demo" */
.cta {
  margin: 3rem auto 0; max-width: 42rem;
  padding: 2.2rem 1.6rem; border-radius: 1rem;
  background: var(--tarjeta); text-align: center;
}
.cta p { color: var(--crema); margin-bottom: 1.2rem; font-size: 1.05rem; max-width: none; }
.cta a.boton {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--crema-boton); color: #000; font-weight: 500;
  padding: 0.4rem 0.4rem 0.4rem 1.4rem; border-radius: 999px; text-decoration: none;
  font-size: 1rem; transition: gap 0.2s;
}
.cta a.boton::after {
  content: '→'; display: flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; border-radius: 999px;
  background: #000; color: var(--crema); font-size: 1rem;
}
.cta a.boton:hover { gap: 0.9rem; }

/* ── Pie de página: el mismo de la portada (centrado, logo, lema y enlaces) ── */
footer.guia {
  max-width: 46rem; margin: 3rem auto 0; padding: 0 1.25rem 2rem;
  text-align: center;
}
footer.guia img.pie-logo { height: 40px; width: auto; display: block; margin: 0 auto 0.8rem; }
footer.guia p.pie-lema { color: var(--crema); font-size: 0.9rem; margin-bottom: 1rem; }
footer.guia p.enlaces { color: var(--gris-oscuro); font-size: 0.78rem; margin-bottom: 1rem; }
footer.guia p.enlaces a { color: var(--gris-oscuro); text-decoration: underline; text-underline-offset: 2px; }
footer.guia p.enlaces a:hover { color: #D1D5DB; }
footer.guia p.pie-copy { color: var(--gris-oscuro); font-size: 0.78rem; }