:root{
  --bg:#fffdf8; --ink:#222; --muted:#555; --accent:#bba36c;
  --card:#fff; --shadow:0 10px 30px rgba(0,0,0,.08); --radius:16px;
}

/* Mosaico sutil como en astrología */
.rel-mosaic, .hijos-mosaic, .viaje-mosaic {
  position: relative;
  background: linear-gradient(180deg,#fffdf8,#fffaf1);
}

.rel-mosaic::before, .hijos-mosaic::before, .viaje-mosaic::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url("logo-astro1.png");
  background-repeat:repeat;
  background-size:2000px auto;
  opacity:.02;
  pointer-events:none;
}

.rel-mosaic > *, .hijos-mosaic > *, .viaje-mosaic > * {
  position:relative;
  z-index:1;
}

/* Layout de las páginas */
.section{
  padding-top:120px; /* Aumentado para compensar el logo grande */
  padding-bottom:76px;
}
.section-alt{padding:80px 0; background:rgba(255,250,241,0.5)}
.wrap{width:min(1100px,92%);margin-inline:auto}

/* Grid base 2 cols */
.consult-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:3rem;
  align-items:start;
}

/* Grid invertido (imagen izq, texto der) */
.consult-grid-reverse{
  grid-template-columns:.9fr 1.1fr;
}

/* Columna izquierda */
.consult-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.8rem;
}

/* Icono grande */
.consult-icon{
  width:80px;
  height:auto;
  margin-bottom:1.5rem;
}

.consult-title{
  font-size:clamp(1.8rem,3vw,2.2rem);
  font-weight:800;
  line-height:1.2;
  margin:0;
  color:var(--ink);
}

.consult-sub{
  font-size:1.15rem;
  color:var(--muted);
  margin:0;
  font-weight:600;
}

.consult-text{
  margin:1rem 0;
}

.consult-text p{
  color:var(--muted);
  line-height:1.7;
  margin:.6em 0;
}

/* Imagen en frame (igual que astrología) */
.consult-figure{
  max-width:520px;
  justify-self:center;
  margin-top:0; /* CAMBIADO de 100px a 0 */
}

/* Imagen en grid invertido: sube para alinearse con el ícono */
.consult-grid-reverse .consult-figure{
  margin-top:0;
}

.frame{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:10px;
}

.frame img{
  border-radius:12px;
  width:100%;
  height:auto;
  display:block;
}

/* Journey (dos tarjetas hermanas) - para viaje.html */
.journey-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
  margin-top:2rem;
}

.journey-card{
  background:var(--card);
  border-radius:12px;
  padding:1.5rem;
  box-shadow:var(--shadow);
}

.journey-card h3{
  font-size:1.2rem;
  font-weight:700;
  margin:0 0 .8rem;
  color:var(--ink);
}

.journey-card p{
  color:var(--muted);
  line-height:1.6;
  margin:0;
}

/* Logo en header */
.brand img {
  height: 120px;
  width: auto;
  margin: -20px 0;
}

/* Logo en footer */
footer .footer-logo {
  margin-bottom: 1.5rem;
}

footer .footer-logo img {
  height: 140px;
  width: auto;
  margin: 0 auto;
  display: block;
  opacity: 0.85;
}

/* Responsive */
@media (max-width:900px){
  .consult-grid,
  .consult-grid-reverse{
    grid-template-columns:1fr;
  }
  
  .consult-figure,
  .consult-grid-reverse .consult-figure{
    margin-top:2rem;
  }
  
  .consult-title{
    font-size:1.6rem;
  }
}

/* ============================================
   RESPONSIVE - SOLO MÓVIL
   ============================================ */

@media (max-width: 768px) {
  /* Reducir padding de secciones */
  .section {
    padding-top: 80px;
    padding-bottom: 40px;
  }

  .section-alt {
    padding: 40px 0;
  }

  /* En viaje.html, relaciones.html, hijos.html - invertir orden en primera sección: imagen primero */
  .viaje-mosaic .section:first-child .consult-grid,
  .rel-mosaic .section:first-child .consult-grid,
  .hijos-mosaic .section:first-child .consult-grid {
    display: flex;
    flex-direction: column;
  }

  .viaje-mosaic .section:first-child .consult-figure,
  .rel-mosaic .section:first-child .consult-figure,
  .hijos-mosaic .section:first-child .consult-figure {
    order: 1; /* Imagen primero */
    margin-bottom: 1rem;
  }

  .viaje-mosaic .section:first-child .consult-left,
  .rel-mosaic .section:first-child .consult-left,
  .hijos-mosaic .section:first-child .consult-left {
    order: 2; /* Texto después */
  }

  /* Reducir gap en grids */
  .consult-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Reducir espacios internos */
  .consult-left {
    gap: 0.5rem;
  }

  .consult-icon {
    margin-bottom: 1rem;
  }

  .consult-text {
    margin: 0.5rem 0;
  }

  /* Logo más pequeño en móvil */
  .brand img {
    height: 70px;
    margin: -10px 0;
  }

  /* Footer logo más pequeño */
  footer .footer-logo img {
    height: 90px;
  }
}

/* i18n */
.i18n{display:none}
html[lang="es"] .i18n[data-lang="es"]{display:revert}
html[lang="en"] .i18n[data-lang="en"]{display:revert}