/* ==========================================================
   Renacer · mejoras visuales (fotos + detalles de diseño)
   Archivo aparte: para quitar todo, basta borrar la línea
   <link rel="stylesheet" href="mejoras.css"> del index.html
   Fotos: Unsplash (licencia libre de Unsplash)
   ========================================================== */

:root{
  --img-desarrollo:url("https://images.unsplash.com/photo-1728931710262-af50e649e350?auto=format&fit=crop&w=900&q=70");
  --img-migracion:url("https://images.unsplash.com/photo-1603309040631-772df9922ef0?auto=format&fit=crop&w=900&q=70");
  --img-limites:url("https://images.unsplash.com/photo-1588338949261-659fc6fed20b?auto=format&fit=crop&w=800&q=70");
  --img-miedo:url("https://images.unsplash.com/photo-1545386673-7723f55e5490?auto=format&fit=crop&w=800&q=70");
  --img-emigrar:url("https://images.unsplash.com/photo-1670888616427-764112453941?auto=format&fit=crop&w=800&q=70");
  --img-idioma:url("https://images.unsplash.com/photo-1501618669935-18b6ecb13d6d?auto=format&fit=crop&w=800&q=70");
  --img-bosque:url("https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?auto=format&fit=crop&w=1800&q=70");
  --img-sombra:url("https://images.unsplash.com/photo-1565430973830-b12076b15215?auto=format&fit=crop&w=1200&q=70");
  --leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f8a5a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-13 14-14 0 9-5 14-13 14'/%3E%3Cpath d='M5 19 14 10'/%3E%3C/svg%3E");
}

/* ---------- Detalle de marca: hojita junto a los subtítulos ---------- */
.eyebrow::before{
  content:"";display:inline-block;width:13px;height:13px;margin:0 8px -2px 0;
  background:var(--leaf) center/contain no-repeat;
}

/* ---------- Portada: manchas orgánicas suaves detrás del texto ---------- */
.hero{
  background:
    radial-gradient(38% 55% at 8% 30%, rgba(216,223,189,.55), transparent 70%),
    radial-gradient(25% 35% at 40% 95%, rgba(216,223,189,.35), transparent 70%);
}

/* ---------- Tarjetas con movimiento suave al pasar el ratón ---------- */
.service-grid > article,
.method-grid > article,
.article-card,
.music-card,
.resource{
  transition:transform .35s ease, box-shadow .35s ease;
}
.service-grid > article:hover,
.method-grid > article:hover,
.article-card:hover,
.music-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -22px rgba(41,62,53,.45);
}

/* ---------- Acompañamiento: foto arriba de cada servicio ---------- */
.service-grid > article{overflow:hidden}
.service-grid > article::before{
  content:"";display:block;flex:0 0 auto;
  height:190px;margin:-32px -32px 28px;
  background:center/cover no-repeat;
}
.service-grid > article:nth-child(1)::before{
  background-image:linear-gradient(to top, rgba(41,69,56,.55), rgba(41,69,56,0) 55%), var(--img-desarrollo);
}
.service-grid > article:nth-child(2)::before{
  background-image:linear-gradient(to top, rgba(239,238,229,.35), rgba(239,238,229,0) 55%), var(--img-migracion);
  background-position:center 45%;
}

/* ---------- Cómo trabajo: íconos de línea + fondo orgánico ---------- */
.method{
  background:
    radial-gradient(30% 45% at 96% 12%, rgba(216,223,189,.5), transparent 70%),
    radial-gradient(22% 35% at 3% 88%, rgba(216,223,189,.4), transparent 70%);
}
.method-grid > article::before{
  content:"";display:block;width:52px;height:52px;border-radius:50%;margin-bottom:20px;
  background:#d8dfbd center/26px no-repeat;
}
/* sientes: corazón */
.method-grid > article:nth-child(1)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23294538' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E");
}
/* piensas: burbuja de pensamiento */
.method-grid > article:nth-child(2)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23294538' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15.5a4 4 0 0 1-.6-7.9A5 5 0 0 1 16 6.2a4 4 0 0 1 1 9.3z'/%3E%3Ccircle cx='7.5' cy='19' r='1.2'/%3E%3Ccircle cx='4.5' cy='21.3' r='.7'/%3E%3C/svg%3E");
}
/* haces: pasos */
.method-grid > article:nth-child(3)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23294538' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3c-1.7 0-2.5 2-2.5 4.5S5.3 12 7 12s2.5-2 2.5-4.5S8.7 3 7 3z'/%3E%3Cpath d='M5 15h4v2a2 2 0 0 1-4 0z'/%3E%3Cpath d='M17 8c1.7 0 2.5 2 2.5 4.5S18.7 17 17 17s-2.5-2-2.5-4.5S15.3 8 17 8z'/%3E%3Cpath d='M15 20h4'/%3E%3C/svg%3E");
}

/* ---------- Artículos: foto en cada tarjeta ---------- */
.article-card{overflow:hidden}
.article-card::before{
  content:"";display:block;flex:0 0 auto;
  height:180px;margin:-30px -26px 24px;
  background:center/cover no-repeat;
  transition:filter .35s ease;
}
.article-card:hover::before{filter:saturate(1.15) brightness(1.03)}
.article-card:nth-child(1)::before{background-image:var(--img-limites)}
.article-card:nth-child(2)::before{background-image:var(--img-miedo);background-position:center 35%}
.article-card:nth-child(3)::before{background-image:var(--img-emigrar)}
.article-card:nth-child(4)::before{background-image:var(--img-idioma)}

/* ---------- Para meditar: fondo de bosque con neblina ---------- */
.meditation{
  background:
    linear-gradient(rgba(31,52,43,.82), rgba(31,52,43,.88)),
    var(--img-bosque) center/cover no-repeat;
  color:#f8f5ef;
}
.meditation .section-heading h2,
.meditation .section-heading p,
.meditation .eyebrow,
.meditation .music-note{color:#f8f5ef}
.meditation .section-heading h2 em{color:#d8dfbd}
.meditation .eyebrow::before{filter:brightness(1.8)}
.meditation .music-card{
  color:#293e35;
  background:rgba(248,245,239,.94);
  box-shadow:0 20px 40px -26px rgba(0,0,0,.6);
}
.meditation .music-note{opacity:.85}

/* ---------- Cita: sombra de plantas muy suave ---------- */
.booking{
  background:
    linear-gradient(rgba(233,237,223,.78), rgba(233,237,223,.78)),
    var(--img-sombra) right bottom/60% auto no-repeat,
    #e9eddf;
}

/* ---------- Aparición suave al hacer scroll (solo navegadores que lo soportan) ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .service-grid > article,
    .method-grid > article,
    .resource,
    .article-card,
    .music-card{
      animation:renacer-in linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 35%;
    }
    @keyframes renacer-in{
      from{opacity:0;translate:0 28px}
      to{opacity:1;translate:0 0}
    }
  }
}

/* ---------- Móvil ---------- */
@media (max-width:760px){
  .service-grid > article::before{height:150px}
  .article-card::before{height:150px}
  .booking{background-size:auto, 100% auto, auto}
}