/* ── APP PAGE STYLES — MODERN MINIMAL ── */

/* APP HEADER */
.app-header{
  padding:var(--sp-xxxl) var(--sp-xl);
  background:var(--ink);
  color:var(--white);
  border-bottom:none;
  min-height:35vh;
  display:flex;flex-direction:column;justify-content:center;
}

.app-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--size-h1);
  line-height:1.1;
  letter-spacing:-0.02em;
  margin-bottom:var(--sp-lg);
}

.app-subtitle{
  font-size:var(--size-p);
  line-height:var(--lh-relaxed);
  color:rgba(255,255,255,0.6);
  max-width:60ch;
}

/* TAB NAVIGATION */
.app-tabs{
  display:flex;
  gap:0;
  background:var(--ink);
  border-bottom:var(--border-width) solid var(--ink);
  padding:0 var(--sp-xl);
}

.tab-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-sm);
  padding:var(--sp-lg) var(--sp-xl);
  border:none;
  background:transparent;
  color:rgba(255,255,255,0.5);
  font-family:var(--font-display);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:all var(--tr-base);
  border-bottom:3px solid transparent;
}

.tab-btn:hover{
  color:rgba(255,255,255,0.7);
}

.tab-btn.tab-active{
  color:var(--white);
  border-bottom-color:var(--blue);
}

.tab-icon{
  font-size:18px;
}

.tab-label{
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-size:12px;
}

/* TAB CONTENT */
.app-content{
  background:var(--bg-primary);
}

.tab-pane{
  display:none;
}

.tab-pane.tab-active{
  display:block;
}

.tab-section{
  max-width:1200px;
  margin:0 auto;
  padding:var(--sp-xxxl) var(--sp-xl);
  background:var(--bg-primary);
}

.tab-pane:nth-child(odd) .tab-section{background:var(--bg-secondary)}

.tab-section h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--size-h2);
  line-height:1.1;
  letter-spacing:-0.02em;
  margin-bottom:var(--sp-md);
  color:var(--text-primary);
}

.tab-description{
  font-size:var(--size-p);
  line-height:var(--lh-relaxed);
  color:var(--text-secondary);
  margin-bottom:var(--sp-xxl);
  max-width:70ch;
}

/* PROTOTIPO TAB */
.prototipo-container{
  margin-bottom:var(--sp-xxl);
  padding:var(--sp-xxxl) var(--sp-xl);
  background:
    radial-gradient(60% 60% at 20% 10%, rgba(89,44,158,0.12), transparent 60%),
    radial-gradient(50% 50% at 85% 90%, rgba(44,145,158,0.12), transparent 60%),
    var(--bg-tertiary);
  border-radius:var(--border-radius-md);
  display:flex;
  justify-content:center;
}

.phone-screen{
  width:100%;
  max-width:900px;
  background:var(--white);
  border-radius:var(--border-radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-md);
}

.phone-screen iframe{
  width:100%;
  height:700px;
  border:none;
  display:block;
}

@media(max-width:720px){
  .phone-screen iframe{height:500px}
}

.prototipo-placeholder{
  background:var(--bg-tertiary);
  border:2px dashed var(--ink);
  border-radius:var(--border-radius-md);
  padding:var(--sp-xxl);
  text-align:center;
  min-height:400px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.placeholder-icon{
  font-size:64px;
  margin-bottom:var(--sp-lg);
}

.prototipo-placeholder h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--size-h3);
  color:var(--text-primary);
  margin-bottom:var(--sp-sm);
}

.prototipo-placeholder p{
  font-size:var(--size-p);
  color:var(--text-secondary);
}

.prototipo-info{
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--border-radius-md);
  padding:var(--sp-xxl) var(--sp-xl);
  box-shadow:var(--shadow-sm);
  transition:all var(--tr-base);
}

.prototipo-info:hover{
  box-shadow:var(--shadow-md);
}

.prototipo-info h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:16px;
  color:var(--text-primary);
  margin-bottom:var(--sp-lg);
}

.pantallas-list{
  list-style:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:var(--sp-md);
}

.pantallas-list li{
  font-size:var(--size-p);
  color:var(--text-secondary);
  padding:var(--sp-md);
  background:var(--bg-tertiary);
  border-radius:var(--border-radius-sm);
  border-left:3px solid var(--blue);
  transition:all var(--tr-base);
  cursor:default;
}

.pantallas-list li:nth-child(1){border-left-color:var(--red)}
.pantallas-list li:nth-child(2){border-left-color:var(--blue)}
.pantallas-list li:nth-child(3){border-left-color:var(--yellow)}
.pantallas-list li:nth-child(4){border-left-color:var(--red)}
.pantallas-list li:nth-child(5){border-left-color:var(--blue)}
.pantallas-list li:nth-child(6){border-left-color:var(--yellow)}
.pantallas-list li:nth-child(7){border-left-color:var(--red)}
.pantallas-list li:nth-child(8){border-left-color:var(--blue)}

.pantallas-list li:hover{
  background:var(--white);
  box-shadow:var(--shadow-sm);
  transform:translateY(-2px);
  padding-left:var(--sp-xl);
}

/* CODIGO TAB */
.codigo-container{
  margin-bottom:var(--sp-xxl);
}

.codigo-info{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:var(--sp-lg);
  margin-bottom:var(--sp-xl);
}

.codigo-stat{
  display:flex;
  flex-direction:column;
  gap:var(--sp-sm);
  padding:var(--sp-xxl) var(--sp-xl);
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--border-radius-md);
  box-shadow:var(--shadow-sm);
  transition:all var(--tr-base);
  position:relative;
  overflow:hidden;
}

.codigo-stat::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(26,47,255,0.1),transparent);
  opacity:0;
  transition:opacity var(--tr-base);
  pointer-events:none;
}

.codigo-stat:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-4px);
}

.codigo-stat:hover::before{
  opacity:1;
}

.stat-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-tertiary);
  font-weight:600;
}

.stat-value{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  color:var(--text-primary);
}

.codigo-link{
  text-align:center;
  margin:var(--sp-xl) 0;
}

.btn-codigo{
  display:inline-block;
  padding:var(--sp-md) var(--sp-xl);
  background:var(--blue);
  color:var(--white);
  text-decoration:none;
  border-radius:var(--border-radius-md);
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  transition:all var(--tr-base);
}

.btn-codigo:hover{
  background:var(--blue-dark);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

.codigo-embed{
  margin:var(--sp-xl) 0;
  border:1px solid var(--border);
  border-radius:var(--border-radius-md);
  overflow:hidden;
}

.app-iframe{
  width:100%;
  height:600px;
  border:none;
  display:block;
}

.codigo-features{
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--border-radius-md);
  padding:var(--sp-xxl) var(--sp-xl);
  margin-top:var(--sp-xxl);
  box-shadow:var(--shadow-sm);
  transition:all var(--tr-base);
}

.codigo-features:hover{
  box-shadow:var(--shadow-md);
}

.codigo-features h3{
  font-family:var(--font-display);
  font-weight:600;
  font-size:16px;
  color:var(--text-primary);
  margin-bottom:var(--sp-lg);
}

.features-list{
  list-style:none;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:var(--sp-md);
}

.features-list li{
  font-size:var(--size-p);
  color:var(--text-secondary);
  padding:var(--sp-md) 0;
  border-bottom:1px solid var(--border);
}

.features-list li:last-child{
  border-bottom:none;
}

/* APP FOOTER */
.app-footer{
  padding:var(--sp-xxxl) var(--sp-xl);
  background:var(--ink);
  color:rgba(255,255,255,0.45);
  text-align:center;
  font-size:var(--size-label);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  border-top:none;
}

/* RESPONSIVE */
@media(max-width:720px){
  .app-header{padding:var(--sp-xl) var(--sp-lg);min-height:auto}
  .tab-section{padding:var(--sp-lg)}
  .app-tabs{padding:0 var(--sp-lg)}
  .tab-btn{padding:var(--sp-md) var(--sp-lg)}
  .app-iframe{height:400px}
  .codigo-info{grid-template-columns:1fr}
  .pantallas-list,
  .features-list{grid-template-columns:1fr}
}