/* ==========================================================================
   BioWay - Pagina de la app (app.php)
   Estilos propios de esta pagina. Depende de bioway-tokens.css.

   IMPORTANTE: las clases .material-card, .material-icon, .materials-grid y
   .material-modal las genera materiales.js desde Firestore. Renombrarlas
   rompe la carga de la guia. El propio JS inyecta ademas un <style> con
   parte de las reglas del modal, asi que aqui solo se define lo que el
   layout necesita.
   ========================================================================== */

/* ── Portada de la modalidad ── */
.hero-app .escena{grid-template-columns:1.05fr .95fr}
.hero-app .escena-media img{max-height:clamp(280px,40vh,420px)}

/* ── Cifras del piloto: conducta medida, sin estimaciones ── */
.probado-app{position:relative;padding:76px 5vw;background:var(--papel-2)}
.probado-app .contenedor{max-width:1200px;margin:0 auto}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:34px}
.cifra{border-left:3px solid var(--light);padding-left:22px}
.cifra b{display:block;font:900 clamp(38px,4.6vw,54px) var(--display);line-height:1;
  letter-spacing:-2px;color:var(--primary)}
.cifra span{display:block;margin-top:8px;font-size:14.5px;color:var(--texto)}
/* la nota es parte del argumento, no letra pequena: se lee */
.nota-cifras{margin-top:30px;font-size:14px;color:var(--texto);max-width:640px;
  padding-left:18px;border-left:2px solid rgba(45,130,89,.28)}

/* ── Los tres actores de la red ── */
#como-funciona{position:relative;overflow:hidden;padding:84px 5vw}
#como-funciona .contenedor{position:relative;z-index:1;max-width:1200px;margin:0 auto}
.actores{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:38px}
.actor{position:relative}
.actor-num{display:block;font:900 clamp(46px,5.5vw,70px) var(--display);line-height:.85;
  letter-spacing:-3px;color:transparent;-webkit-text-stroke:1.5px rgba(45,130,89,.3);
  margin-bottom:10px;user-select:none}
.actor h3{font:800 21px var(--display);color:var(--tinta);margin-bottom:10px}
.actor p{font-size:15px;color:var(--texto);margin-bottom:16px}

/* ── Guia de materiales (contrato con materiales.js) ──
   Rediseño 22-ago-2026: antes .material-category/.material-items no tenian
   NINGUNA regla (las pintaba materiales.js sin estilo propio, asi que cada
   categoria quedaba como un bloque generico pegado al siguiente, sin
   separacion ni jerarquia). El contrato de clases con materiales.js no
   cambia: solo se les da diseño. */
.recycling-guide{padding:84px 5vw;background:var(--menta-suave);
  clip-path:ellipse(150% 100% at 50% 100%)}
.recycling-guide .contenedor{max-width:1080px;margin:0 auto}

.guia-encabezado{display:flex;align-items:center;justify-content:space-between;gap:24px}
.guia-duda{flex:none;width:150px;height:150px;object-fit:contain;
  filter:drop-shadow(0 16px 28px rgba(13,69,44,.16))}
@media (max-width:640px){
  .guia-duda{display:none} /* en movil el espacio de la duda compite con el titulo; la pregunta ya la responde el propio texto */
}

.material-category{margin-top:38px}
.material-category:first-of-type{margin-top:30px}
.material-category h3{font:800 13px var(--cuerpo);letter-spacing:.6px;text-transform:uppercase;
  color:var(--medio);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #DCEEE1}

.material-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px}
.material-card{background:#fff;border:1px solid #E4F1E7;border-radius:16px;padding:18px 14px;
  text-align:center;cursor:pointer;transition:transform .18s cubic-bezier(.2,.8,.2,1),
  box-shadow .18s,border-color .18s}
.material-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(13,69,44,.1);
  border-color:var(--light-2)}
.material-card:focus-visible{transform:translateY(-3px)}

/* Icono: mismo tamaño de imagen que antes (44px) — solo cambia el marco.
   El borde de 4px de color por categoria se retira: con 15 materiales y
   colores dispares (morado, café, azul...) leía como ruido, no como
   sistema. El aro fino y neutro deja que el propio icono cargue el color. */
.material-icon{width:64px;height:64px;margin:0 auto 12px;border-radius:16px;
  display:grid;place-items:center;overflow:hidden;background:var(--papel-2);
  border:1px solid #E8F2EA}
.material-icon img{width:44px;height:44px;object-fit:contain}
.material-card h4,.material-card h3{font:700 14px var(--cuerpo);color:var(--tinta);
  text-transform:none;letter-spacing:0}
.material-card .material-card-sub{display:block;margin-top:4px;font:500 12px var(--cuerpo);
  color:var(--texto);line-height:1.35}
.material-card .material-card-piloto{display:inline-block;margin-top:8px;font:700 10.5px var(--cuerpo);
  letter-spacing:.3px;color:var(--medio);background:var(--menta);border-radius:99px;
  padding:3px 10px}

.loading-spinner{grid-column:1/-1;display:none;flex-direction:column;align-items:center;
  gap:14px;padding:44px 0;color:var(--texto);font-size:14px}
.loading-spinner.active{display:flex}
.spinner{width:34px;height:34px;border:3px solid rgba(45,130,89,.2);
  border-top-color:var(--medio);border-radius:50%;animation:girar .9s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.error-message{grid-column:1/-1;padding:30px;text-align:center;color:var(--texto);
  background:#fff;border:1px solid #E4F1E7;border-radius:16px}

/* ── Contexto: solo cifras verificables, cada una con su fuente ── */
.contexto{padding:84px 5vw}
.contexto .contenedor{max-width:1200px;margin:0 auto}
.datos{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:36px}
.dato{background:#fff;border:1px solid #E8F2EA;border-radius:20px;padding:28px}
.dato b{display:block;font:900 clamp(30px,3.4vw,42px) var(--display);line-height:1;
  letter-spacing:-1.5px;color:var(--primary)}
.dato-que{display:block;margin:8px 0 14px;font:700 14px var(--cuerpo);color:var(--tinta)}
.dato p{font-size:14px;color:var(--texto);line-height:1.55}
/* el matiz va en cursiva junto a la cifra que lo necesita */
.dato em{font-style:italic;color:var(--medio)}
.dato cite{display:block;margin-top:14px;padding-top:12px;font:600 11.5px var(--cuerpo);
  letter-spacing:.4px;color:#8FAF9C;font-style:normal;border-top:1px solid #EDF5EF}

/* ── Datos curiosos: mismo lenguaje de tarjeta que .dato, contenido distinto ── */
.ecodatos{padding:84px 5vw}
.ecodatos .contenedor{max-width:1200px;margin:0 auto}
.ecodatos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px}
.ecodato{background:#fff;border:1px solid #DCEEE1;border-radius:18px;padding:24px 22px}
.ecodato p{font:600 15px var(--display);color:var(--tinta);line-height:1.4}
.ecodato cite{display:block;margin-top:14px;padding-top:12px;font:600 11.5px var(--cuerpo);
  letter-spacing:.4px;color:#8FAF9C;font-style:normal;border-top:1px solid #EDF5EF}
@media (max-width:1040px){.ecodatos-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ecodatos-grid{grid-template-columns:1fr}}

/* ── Descarga ── */
.descarga{padding:80px 5vw}
.descarga .contenedor{max-width:1200px;margin:0 auto}
.descarga-caja{display:grid;grid-template-columns:1.6fr .8fr;gap:36px;align-items:center;
  background:var(--grad-app);border-radius:28px;padding:48px}
.descarga-caja h2{color:var(--tinta)}
.descarga-caja .lede{color:var(--texto);margin:14px 0 24px;max-width:520px}
.descarga-moneda{max-height:180px;width:auto;justify-self:center;
  filter:drop-shadow(0 18px 30px rgba(13,69,44,.22))}

/* ── Responsive ── */
@media (max-width:1040px){
  .cifras,.actores,.datos{grid-template-columns:1fr 1fr}
  .hero-app .escena{grid-template-columns:1fr}
  .hero-app .escena-media{order:-1}
}
@media (max-width:720px){
  .cifras,.actores,.datos{grid-template-columns:1fr;gap:26px}
  .probado-app,#como-funciona,.recycling-guide,.contexto,.descarga{padding:56px 5vw}
  .material-items{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
  .material-card{padding:14px 8px;border-radius:14px}
  .material-icon{width:52px;height:52px;border-radius:13px;margin-bottom:8px}
  .material-icon img{width:34px;height:34px}
  .material-card h4,.material-card h3{font-size:12.5px}
  .material-card .material-card-sub{display:none} /* la subfrase se lee en el modal, no en la rejilla apretada */
  .descarga-caja{grid-template-columns:1fr;padding:32px 24px;text-align:center}
  .descarga-caja .lede{margin-inline:auto}
  .descarga-caja .hero-ctas{justify-content:center}
  .descarga-moneda{max-height:130px;order:-1}
}
@media (max-width:420px){
  .material-items{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
}

/* ── Los botones de las dos tiendas (19-ago-2026) ─────────────────────
   Sustituyen al botón único que llevaba al panel privado de ECOCE. Forma
   de «badge» de tienda —icono + «Disponible en» pequeño + nombre—, que es
   lo que la gente reconoce, pero con el radio y la sombra de la casa en
   vez de las imágenes oficiales: así respetan la identidad del sitio y no
   dependen de un recurso externo. */
.tiendas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.tienda {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 20px 11px 16px; border-radius: 100px;
  background: var(--primary); color: #fff; text-decoration: none;
  box-shadow: 0 8px 22px rgba(14, 79, 48, .22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tienda:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(14, 79, 48, .3); color: #fff; }
.tienda:focus-visible { outline: 3px solid var(--light); outline-offset: 2px; }
.tienda svg { flex: none; }
.tienda span {
  display: flex; flex-direction: column; line-height: 1.15;
  font: 700 15px var(--cuerpo); letter-spacing: -.2px;
}
.tienda small { font: 600 10px var(--cuerpo); letter-spacing: 1.1px; text-transform: uppercase; opacity: .8; }
.tiendas-pie { margin-top: 16px; }

@media (max-width: 720px) {
  /* En teléfono los dos botones ocupan el ancho: son la acción principal
     de la página y el pulgar los alcanza mejor. */
  .tiendas { flex-direction: column; align-items: stretch; }
  .tienda { justify-content: center; }
  .tiendas-pie { text-align: center; }
}