/* ========== BASE DEL SITIO (perfil del grupo) ========== */

body {
  background-color: #eef8fc; /* reemplazo del rosa claro por un celeste muy suave */
  font-family: 'Plus Jakarta Sans', sans-serif; 
  color: #292929;
  margin: 2rem 4rem;
}

h1 {
  font-size: 7rem; 
  font-weight: bold;
  line-height: 1rem;  
  transition: color 0.3s;
}

h2 {font-size:2rem; font-weight: normal;}
h3 {font-size:1.5rem; font-weight: normal;}

.bold {font-weight: bold;}

.linea-degradado {
  height: 0.5rem;
  margin-top: 2rem;
  border-radius: 40px;
  background: linear-gradient(-225deg, #57BBD9 0%, #0387CC 100%);  
}

/* Menu */
nav {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding: 1rem 2rem;
}

.logo img { max-height: 40px; }

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;  
}

.menu a {  
  color: #292929;  
  text-decoration: none; 
  transition: color 0.3s;
}

.menu a:hover {
  font-weight: bold;
  color: #0387CC;
}

/* Inicio (banner) */
.inicio {
  text-align:center;
  padding: 6rem; 
  margin-top: 2rem;  
  background-image: linear-gradient(-225deg, #57BBD9 0%, #0387CC 100%); 
  border-radius: 40px;
  color: #ffffff;
}

/* Integrantes */
.integrantes { 
  display: flex;  
  justify-content: center;  
  flex-wrap: wrap;  
  gap: 2rem;
  padding: 6rem 3rem;  
}

[class^="columna-"] {
  width: 16%;
  padding: 2rem;  
  border-radius: 1rem;  
  box-sizing: border-box;
  text-align:center;
  border: solid 1px #57BBD9;
  transition: transform 0.2s, background-color 0.2s;
}

[class^="columna-"]:hover {
  transform: translateY(-5px);
  background-color: rgba(87, 187, 217, 0.1);
}

.boton-perfil {
  display: inline-block;
  margin-top: 1rem;
  padding: 12px 24px;
  border: #57BBD9 solid 1px;
  color: #0387CC;
  text-decoration: none;  
  border-radius: 30px;
}

.boton-perfil:hover {
  color: #ffffff;
  background-image: linear-gradient(-225deg, #57BBD9 0%, #0387CC 100%);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(3, 135, 204, 0.25);
  font-weight: bold;
}

/* Datos */
.datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 2rem 4rem;  
  font-size: small;   
  gap: 2rem; 
}

/* Footer global (INDEX grupal) */
footer {
  display: flex;
  flex-wrap: wrap;  
  justify-content: space-between;
  padding: 1rem 4rem;
  align-items: center;
  color: #353535;
  font-size: x-small;
  border-radius: 40px;
  border: 1px solid #353535;
  gap: 2rem;
}

.footer-text { max-width: 60%; }

/* Cajas base “plan-” (estilo celeste) */
[class^="plan-"] {
  margin-top: 2rem;
  padding: 2rem 4rem;
  border: #57BBD9 solid 1px;
  border-radius: 40px;
}

/* Grid sencillo original para la persona */
.user { display: flex; gap: 2rem; border: none; }

/* Estado por defecto de plan-user (se sobreescribe en plan) */
.plan-user { background-color: #57BBD9; color: #ffffff; }

/* Hover global (se desactiva en plan) */
[class^="plan-"]:hover {
  transform: translateY(-5px);
  background-color: rgba(87, 187, 217, 0.1);
  color: #292929;
}

/* ========== AJUSTES ESPECÍFICOS PARA plan.html ========== */
/* Todos con .page-plan para no afectar al index */

/* Más interlineado en plan */
.page-plan [class^="plan-"] p,
.page-plan [class^="plan-"] li{ line-height: 1.75; }

/* Títulos en celeste acento */
.page-plan .plan-introduccion h2,
.page-plan .plan-objetivo h2,
.page-plan .plan-propuesta h2,
.page-plan .plan-comitente h2,
.page-plan .plan-user h2{ color: #0387CC; }

/* User Persona: menos protagonismo */
.page-plan .plan-user{
  background-color: rgba(87, 187, 217, 0.12);
  color: #292929;
  border-color: #57BBD9;
}

/* “Luz Ramírez” en blanco sobre acento */
.page-plan .persona__name{
  display:inline-block;
  background:#0387CC;
  color:#fff;
  font-weight:800;
  padding:.25rem .6rem;
  border-radius: 12px;
  margin: .25rem 0 .75rem;
}

/* User Persona en grid 2 columnas */
.page-plan .user{
  display:grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 2rem;
}
.page-plan .user .col{ min-width:260px }
.page-plan .user .persona-why{
  grid-column: 1 / -1;
  margin-top: .5rem;
}

/* Secciones del plan angostas y centradas (banner .inicio NO se toca) */
.page-plan [class^="plan-"]{
  max-width: 760px;     /* ajustable: 760–820 */
  margin: 1.25rem auto;
  padding: 1.25rem 1.5rem;
}

/* Sin hover en plan */
.page-plan [class^="plan-"]:hover{
  transform:none; background-color:inherit; color:inherit;
}
.page-plan .plan-user:hover{ background-color: rgba(87, 187, 217, 0.12); color:#292929; }

/* Separación extra antes del footer del plan */
.page-plan .linea-degradado{ margin-bottom: 2.5rem; }

/* FOOTER del plan = igual al del INDEX (de punta a punta dentro del body) */
.page-plan footer{
  margin: 0 0 3rem 0;           /* separa del final */
  padding: 1rem 4rem;
  border: 1px solid #353535;
  border-radius: 40px;
  background: transparent;      /* SIN fondo, solo stroke */
  color: #353535;
  font-size: x-small;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;

  /* sin límites de ancho para ocupar todo el ancho útil del body */
  width: auto;
  max-width: none;
}

/* Responsive plan */
@media (max-width: 900px){
  .page-plan .user{ grid-template-columns: 1fr; }
  .page-plan [class^="plan-"], 
  .page-plan footer{ max-width: 92%; padding: 1rem 1rem; margin-left:auto; margin-right:auto; }
}

/* ========== AJUSTES ESPECÍFICOS PARA mapa.html ========== */
/* Mantiene la línea estética del plan e index */

.page-mapa .mapa-embed{
  max-width: 760px;              /* ajustá 760–820 si querés */
  margin: 1.25rem auto;
  padding: 1.25rem 1.5rem;
  border: 1px solid #57BBD9;
  border-radius: 40px;
  background: #fff;
}
.page-mapa .mapa-embed h2{ color:#0387CC; }

.page-mapa .mapa-frame{
  border-radius: 28px;           /* suaviza el iframe dentro de la caja */
  overflow: hidden;
  border: 1px solid rgba(87,187,217,.35);
}

/* Más aire antes del footer */
.page-mapa .linea-degradado{ margin-bottom: 2.5rem; }

/* Footer del mapa = igual al index (de punta a punta dentro del body) y SIN fondo */
.page-mapa footer{
  margin: 0 0 3rem 0;
  padding: 1rem 4rem;
  border: 1px solid #353535;
  border-radius: 40px;
  background: transparent;       /* sin fondo, solo stroke */
  color: #353535;
  font-size: x-small;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;

  width: auto;
  max-width: none;
}

@media (max-width: 900px){
  .page-mapa .mapa-embed{ max-width: 92%; padding: 1rem 1rem; }
  .page-mapa footer{ max-width: 92%; padding: 1rem 1rem; margin-left:auto; margin-right:auto; }
}
/* ===== mapa.html: la caja del prototipo al mismo ancho que .inicio ===== */
.page-mapa .mapa-embed{
  max-width: none;   /* sin límite: ocupa todo el ancho útil del body */
  width: auto;
  margin: 1.25rem 0; /* alinea con .inicio, que ya usa el margen del body */
}

/* en mobile mantenemos el mismo comportamiento (sin max-width) */
@media (max-width: 900px){
  .page-mapa .mapa-embed{ max-width: none; }
}
/* ===== HOTFIX RESPONSIVE PARA EL INDEX (solo lo necesario) ===== */

/* Evitar desbordes horizontales raros */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }

/* Tablet (≤ 1024px) */
@media (max-width: 1024px){
  body{ margin: 1.5rem 2rem; }
  h1{ font-size: 5rem; line-height: 1.1; }
  .menu{ gap: 1rem; }
  .integrantes{ padding: 3rem 1.5rem; }
  [class^="columna-"]{ width: 30%; padding: 1.25rem; }
}

/* Mobile común (≤ 768px) */
@media (max-width: 768px){
  body{ margin: 1rem 1.25rem; }
  h1{ font-size: 3.5rem; }
  h2{ font-size: 1.6rem; }
  .inicio{ padding: 3rem 1.5rem; }

  /* NAV en columna para que no tape nada */
  nav{ flex-direction: column; align-items: flex-start; gap: .75rem; }
  .menu{ flex-wrap: wrap; gap: .75rem; }

  /* Integrantes: 2 por fila */
  .integrantes{ gap: 1rem; padding: 2rem 0; }
  [class^="columna-"]{ width: 48%; padding: 1rem; }

  /* Datos y footer más compactos */
  .datos{ padding: 1rem; gap: 1rem; }
  footer{ padding: 1rem 1.25rem; border-radius: 28px; gap: 1rem; }
  .footer-text{ max-width: 100%; }
}

/* Mobile chico (≤ 480px) */
@media (max-width: 480px){
  h1{ font-size: 2.6rem; }
  h2{ font-size: 1.35rem; }
  h3{ font-size: 1rem; }
  .linea-degradado{ border-radius: 20px; }

  /* Integrantes: 1 por fila */
  [class^="columna-"]{ width: 100%; padding: .9rem; }
}
/* ===== Integrantes: centrar fotos y emparejar tamaño ===== */
.integrantes img{
  display: block;             /* saca el “desfasaje” de línea */
  margin: 0 auto .75rem;      /* centro + aire bajo la foto */
  max-width: 160px;           /* tamaño tope en desktop */
  width: 100%;
  aspect-ratio: 1 / 1;        /* cuadradas aunque el archivo no lo sea */
  object-fit: cover;          /* recorta sin deformar */
  border-radius: 16px;        /* esquinas suaves */
}

/* asegura que el contenido de la tarjeta quede centrado */
[class^="columna-"]{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;        /* centra imagen + botones dentro de la tarjeta */
}

/* en mobile, un toque más chicas para que respiren */
@media (max-width: 768px){
  .integrantes img{ max-width: 140px; border-radius: 14px; }
}
@media (max-width: 480px){
  .integrantes img{ max-width: 120px; border-radius: 12px; }
}
/* ===== app.html – estilos específicos ===== */
.page-app .app-embed{
  max-width: 760px;              /* igual que plan/mapa */
  margin: 1.25rem auto;
  padding: 1.25rem 1.5rem;
  border: 1px solid #57BBD9;
  border-radius: 40px;
  background: #fff;              /* si querés sin fondo, cambiá a transparent */
}
.page-app .app-embed h2{ color:#0387CC; }

.page-app .app-frame{
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(87,187,217,.35);
}

.page-app .figma-app{
  width: 100%;
  height: 80vh;   /* podés usar 70/90vh o 720px fijo */
  border: 0;
}

/* Aire antes del footer */
.page-app .linea-degradado{ margin-bottom: 2.5rem; }

/* Footer de app = igual al index (de punta a punta, sin fondo) */
.page-app footer{
  margin: 0 0 3rem 0;
  padding: 1rem 4rem;
  border: 1px solid #353535;
  border-radius: 40px;
  background: transparent;   /* sin fondo, solo stroke */
  color: #353535;
  font-size: x-small;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;

  width: auto;
  max-width: none;
}

/* Responsive mínimo */
@media (max-width: 900px){
  .page-app .app-embed{ max-width: 92%; padding: 1rem 1rem; }
  .page-app footer{ max-width: 92%; padding: 1rem 1rem; margin-left:auto; margin-right:auto; }
}
@media (max-width: 480px){
  .page-app .figma-app{ height: 65vh; }
}
/* ===== plan.html – sección Design System ===== */

.page-plan .plan-designsystem
  /* hereda el look angosto, borde y radios del resto */
  /* (ya tenés .page-plan [class^="plan-"]) */


.page-plan .plan-designsystem h2{ color:#0387CC; }

.page-plan .plan-designsystem .ds-fig{
  margin: .75rem 0 0;
}

.page-plan .plan-designsystem img{
  display:block;
  width:100%;
  height:auto;
  border-radius: 20px;
  border: 1px solid rgba(87,187,217,.35);
}
.page-plan .plan-designsystem figcaption{
  font-size: .9rem;
  opacity:.8;
  margin-top: .5rem;
}
/* ===== fix: h2 celestes en las nuevas secciones del plan ===== */
.page-plan .plan-why h2,
.page-plan .plan-designsystem h2{
  color: #0387CC;
}