/* SOLO estilos locales. El layout base y NAV vienen de styles.css */
:root{
  /* Variables ya existen en styles.css, pero las referenciamos por claridad */
  --bg:#fffdf8; --ink:#222; --muted:#555; --accent:#bba36c;
  --card:#fff; --shadow:0 10px 30px rgba(0,0,0,.08); --radius:16px;
}

/* Utilidades locales */
img{max-width:100%;height:auto;display:block}
.frame{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px}
.frame img{border-radius:12px}

/* ====== Mosaico sutil como en el index ====== */
.astro-mosaic{position:relative}
.astro-mosaic::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:url("logo-astro1.png");
  background-repeat:repeat;
  background-size:1800px auto;  /* grande para que no se noten círculos */
  opacity:.02; pointer-events:none;
}
.astro-mosaic > *{ position:relative; z-index:1 }

/* ====== Grids de la página ====== */
.astro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.astro-grid--invert{grid-template-columns:.9fr 1.1fr}
@media (max-width:900px){
  .astro-grid,.astro-grid--invert{grid-template-columns:1fr}
}

/* ====== Sección 1 (Intro) - SIN sombreado ====== */
.astro-hero{padding-top:100px;padding-bottom:76px}
.astro-copy p{margin:.6em 0}
.astro-copy .section-title,
.astro-copy p,
.astro-copy .eyebrow {
  text-shadow: none;
}

/* Título negro y más pequeño para ocupar 3 líneas */
.astro-copy .section-title {
  color: #222;
  font-size: 1.8rem;
  line-height: 1.3;
  max-width: 100%;
  margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
  .astro-copy .section-title {
    font-size: 1.5rem;
  }
}

/* Imagen vertical en el primer grid (cartanatal3.jpg) */
.astro-hero .astro-figure {
  max-width: 420px;  /* más angosto para aspecto vertical */
  justify-self: center;
  margin-top: 80px;  /* baja el inicio de la imagen */
}

.astro-hero .astro-figure img {
  aspect-ratio: 3/4;  /* proporción vertical */
  object-fit: cover;
  object-position: center;
}

/* ====== Sección 2 (Duo crema) ====== */
.astro-duo{
  padding:76px 0;
  background:linear-gradient(180deg,#fffdf8,#fffaf1);
}

/* ====== Ventana / Banda (parallax) ====== */
.astro-band{
  position:relative; padding:0; overflow:hidden; min-height:45vh;
}
.astro-band .astro-band-inner{
  position:relative; z-index:2; text-align:center; color:#fff;
  display:grid; place-items:center; min-height:45vh; padding:0 1rem;
  font-style:italic; font-weight:600;
}
.astro-band .astro-band-inner p {
  color: #fff;
  font-size: 1 rem;
  line-height: 1.4;
  margin: 0;
}
.astro-band::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:url("zoodiaco-edificio.jpg");
  background-size:cover;
  background-position:center var(--astro-band-pos, 0%);
  filter:brightness(.85);
  /* Transición suave para movimiento fluido */
  transition: background-position 0.3s ease-out;
}
.astro-band::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.25));
}

/* ====== FAQ (acordeón) ====== */
.astro-faq{padding:76px 0}
.astro-accordion{display:grid;gap:12px;margin-top:14px}
.astro-item{background:var(--card);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.astro-q{
  width:100%; text-align:left; background:transparent; border:0; padding:16px 18px;
  font:inherit; font-weight:800; display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  color: #111 !important; /* AGREGAR: forzar negro */
  -webkit-text-fill-color: #111 !important; /* AGREGAR: fix para iOS */
  -webkit-appearance: none; /* AGREGAR: remover estilos nativos iOS */
}
.astro-icon{font-weight:900; opacity:.55; margin-left:12px; transition:.2s}
.astro-q[aria-expanded="true"] .astro-icon{transform:rotate(45deg)}
.astro-a{padding:0 18px 16px}
.astro-a p{margin:.6em 0}

/* Imagen pequeña dentro de la respuesta #2 */
.astro-fig-small{
  margin:12px auto 0; text-align:center; max-width:320px;   /* tamaño chico */
}
.astro-fig-small img{
  width:100%; height:auto; display:block;
  border-radius:10px; box-shadow:0 8px 22px rgba(0,0,0,.08);
}
.astro-fig-small figcaption{
  font-size:.9rem; color:#666; margin-top:6px;
}

/* ====== Menú móvil (usa el patrón del sitio) ====== */
.nav-toggle{display:none}
@media (max-width:850px){
  .site-nav{display:none;position:absolute;right:4%;top:60px;background:var(--card);box-shadow:var(--shadow);border-radius:12px;padding:10px;flex-direction:column}
  .site-nav.open{display:flex}
  .nav-toggle{display:inline-block;background:transparent;border:0;font-size:24px;color:inherit}
}
@media (min-width:851px){ .nav-toggle{display:none} }

.i18n { display:none; }
html[lang="es"] .i18n[data-lang="es"] { display:block; }
html[lang="en"] .i18n[data-lang="en"] { display:block; }

/* 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 - SOLO MÓVIL
   ============================================ */

@media (max-width: 768px) {
  /* Ocultar la primera imagen en móvil */
  .astro-hero .astro-figure {
    display: none;
  }

  /* Reducir espacio en blanco en sección duo */
  .astro-duo {
    padding: 20px 0; /* Menos espacio en móvil */
  }

  /* Reducir espacio entre elementos del grid */
  .astro-grid {
    gap: 1rem; /* REDUCIDO de 2rem a 1rem */
  }

  /* 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;
  }
}