/* styles.css */
:root{
  --bg:#0b1020;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --brand:#2563eb;
  --ring:#e2e8f0;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#eef2ff,#f8fafc);
}

.site-header{
  text-align:center;
  padding:48px 16px 24px;
}
.site-header h1{margin:0 0 8px;font-size:clamp(28px,4vw,40px);}
.site-header p{margin:0;color:var(--muted)}

.container{
  max-width:1100px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.app-card{
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:8px;
  border-bottom:1px dashed var(--ring);
}

.app-header__left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  flex:1 1 auto;
}
.app-header__left h2{
  margin:0;
  font-size:1.25rem;
  font-weight:700;
}
.app-header__right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.qr-img-large{
  width:88px;
  height:88px;
  border:1px solid var(--ring);
  border-radius:8px;
}
@media (max-width:480px){
  .qr-img-large{ width:72px; height:72px; }
}

.store-link{
  font-weight:600;
  text-decoration:none;
  color:#fff;
  background:var(--brand);
  padding:8px 12px;
  border-radius:10px;
}

.gallery{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}
.gallery img{
  width:100%;
  height: auto;
  border-radius:12px;
  border:1px solid var(--ring);
  display:block;
}

.site-footer{
  text-align:center;
  color:var(--muted);
  padding:24px 16px;
  border-top:1px solid var(--ring);
}

/* Collapsible description cell */
.collapsible{
  border:1px solid var(--ring);
  background:#f8fafc;
  border-radius:12px;
  padding:0;
  overflow:hidden;
}
.collapsible > summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  font-weight:600;
  color:var(--text);
  position:relative;
}
.collapsible > summary::-webkit-details-marker{ display:none; }
.collapsible > summary:after{
  content:"▸";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  color:var(--muted);
}
.collapsible[open] > summary:after{ content:"▾"; }
.collapsible-content{
  padding:12px 14px 14px;
  color:var(--text);
}
.collapsible-content h3{ margin:6px 0 8px; font-size:1rem; }
.collapsible-content h4{ margin:6px 0; font-size:.95rem; color:var(--muted); }
.collapsible-content p{ margin:.4rem 0; }
.collapsible-content ul{ margin:.4rem 0 .4rem 1rem; }
.collapsible-content li{ margin:.2rem 0; }

/* --- Animated collapsible --- */
.collapsible .collapsible-content{
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms ease;
}
.collapsible[open] .collapsible-content{
  max-height: 1000px; /* suficientemente grande para el contenido */
}
@media (prefers-reduced-motion: reduce){
  .collapsible .collapsible-content{ transition: none; }
}
.collapsible > summary:after{
  transition: transform 200ms ease;
}
.collapsible[open] > summary:after{
  transform: translateY(-50%) rotate(90deg);
  content:"▸";
}


/* JS-driven collapsible */
.js-collapsible{
  border:1px solid var(--ring);
  background:#f8fafc;
  border-radius:12px;
  overflow:hidden;
}
.collapsible-toggle{
  width:100%;
  text-align:left;
  padding:12px 14px;
  font-weight:600;
  background:none;
  border:none;
  cursor:pointer;
  position:relative;
}
.collapsible-toggle::after{
  content:"▸";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  color:var(--muted);
  transition: transform 200ms ease;
}
.js-collapsible.open .collapsible-toggle::after{
  transform:translateY(-50%) rotate(90deg);
}
.collapsible-content{
  max-height:0;
  overflow:hidden;
  transition:max-height 300ms ease;
  padding:0 14px;
}
.js-collapsible.open .collapsible-content{
  padding:12px 14px 14px;
  max-height:2000px; /* large enough */
}


/* Custom collapsible (animated) */
.collapsible{
  border:1px solid var(--ring);
  background:#f8fafc;
  border-radius:12px;
  overflow:hidden;
}
.collapsible-toggle{
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  padding:12px 14px;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.collapsible .caret{
  transition: transform 200ms ease;
}
.collapsible.open .caret{
  transform: rotate(90deg);
}
.collapsible-panel{
  padding:12px 14px 14px;
  transition: max-height 300ms ease;
}


/* Layout fixes for collapsible block */
.app-card .collapsible{ display:block; width:100%; margin-top:8px; }
.collapsible-toggle{ border-top:1px dashed var(--ring); }
.collapsible-panel{ background:#fff; }


/* Collapsible toggle size tweak and single caret via ::after */
.collapsible-toggle{
  font-size: 1.05em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
}
/* Remove any old caret span styles by not using it; use ::after instead */
.collapsible .caret{ display:none !important; }

.collapsible-toggle::after{
  content: "▸";
  font-size: 1.2em;
  margin-left: 8px;
  transition: transform 200ms ease;
}
.collapsible.open .collapsible-toggle::after{
  transform: rotate(90deg);
}


/* Caret centering fix */
.collapsible-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  line-height: 1.2;
}
.collapsible-toggle::after{
  content: "▸";
  display:inline-block;
  font-size: 1.1em;
  line-height: 1;
  margin-left: 8px;
  transform-origin: 50% 50%;
  vertical-align: middle;
  transition: transform 220ms ease;
}
.collapsible.open .collapsible-toggle::after{
  transform: rotate(90deg);
}


/* Stable caret using absolute-positioned SVG background to avoid layout shift */
.collapsible-toggle{
  position: relative;
  padding-right: 34px; /* room for caret */
}
.collapsible-toggle::after{
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: 50% 50%;
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9%206l8%206-8%206z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: .75;
  transition: transform 220ms ease, opacity 120ms ease;
}
.collapsible.open .collapsible-toggle::after{
  transform: translateY(-50%) rotate(90deg);
  opacity: 1;
}