/* ==========================================================================
   misgp.cl — hoja de estilos
   Paleta tomada de la app SGP (valores exactos de las capturas).
   ========================================================================== */

:root {
  /* Marca */
  --naranja:        #F47416;
  --naranja-oscuro: #E85C0C;
  --verde:          #38A048;
  --rojo:           #E74C3C;

  /* Oscuros (tema oscuro de la app) */
  --negro:          #0B0B0B;
  --superficie:     #151515;
  --chip-oscuro:    #202020;
  --borde-oscuro:   #2E2E2E;
  --sobre-oscuro:   #B5ADA7;
  --tenue:          #7C736D;

  /* Claros (tema claro de la app) */
  --crema:          #F7F3EE;
  --blanco:         #FFFFFF;
  --chip-claro:     #F0EBE4;
  --borde:          #DFD7CE;
  --borde-suave:    #E8E1D9;
  --tinta:          #1A1A1A;
  --tinta-media:    #6B625B;
  --tinta-suave:    #8A817B;

  /* Medidas */
  --gutter: clamp(20px, 5vw, 96px);
  --ancho:  1440px;
  --seccion: clamp(56px, 7vw, 96px);

  --display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --texto:   'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--naranja); text-decoration: none; }
a:hover { color: var(--naranja-oscuro); }

h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; }

:focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 3px;
}

.salta-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--naranja);
  color: var(--negro);
  padding: 12px 20px;
  font-weight: 700;
  z-index: 100;
}
.salta-al-contenido:focus { left: 0; }

.wrap {
  width: min(100%, var(--ancho));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.display { font-family: var(--display); }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------- botones */

.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  padding: 17px 30px;
  background: var(--naranja);
  color: var(--negro);
  border: 1px solid var(--naranja);
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--naranja-oscuro); border-color: var(--naranja-oscuro); color: var(--negro); }

.btn--borde {
  background: transparent;
  color: var(--crema);
  border-color: #333333;
  font-weight: 500;
}
.btn--borde:hover { background: #1A1A1A; color: var(--crema); border-color: #4A4A4A; }

.btn--oscuro {
  background: var(--negro);
  border-color: var(--negro);
  color: var(--crema);
  font-weight: 500;
}
.btn--oscuro:hover { background: #000; color: var(--crema); }

.btn--compacto { padding: 12px 22px; font-size: .9375rem; }

/* -------------------------------------------------------- bloque oscuro */

.oscuro {
  background: var(--negro);
  color: var(--crema);
}

/* -------------------------------------------------------------- cabecera */

.cabecera {
  border-bottom: 1px solid var(--chip-oscuro);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--crema);
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.4px;
}
.marca:hover { color: var(--crema); }
.marca__icono {
  width: 32px; height: 32px;
  background: var(--naranja);
  color: var(--negro);
  display: grid; place-items: center;
  font-size: .9375rem; font-weight: 700;
  flex-shrink: 0;
}

.nav { display: flex; align-items: center; gap: 32px; }
.nav a { color: var(--sobre-oscuro); font-size: .9375rem; }
.nav a:hover { color: var(--crema); }

.acciones { display: flex; align-items: center; gap: 16px; }
.acciones .ingresar { color: var(--sobre-oscuro); font-size: .9375rem; }
.acciones .ingresar:hover { color: var(--crema); }

/* menú móvil sin JavaScript */
.menu-movil { display: none; }
.menu-movil > summary {
  list-style: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  cursor: pointer;
}
.menu-movil > summary::-webkit-details-marker { display: none; }
.menu-movil__panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: 12px 20px;
  border-top: 1px solid var(--chip-oscuro);
}
.menu-movil__panel[hidden] { display: none; }
.menu-movil__panel a {
  color: var(--sobre-oscuro);
  padding: 13px 4px;
  font-size: 1rem;
}

/* ------------------------------------------------------------------ hero */

.hero {
  display: grid;
  gap: clamp(40px, 6vw, 56px);
  padding-block: clamp(44px, 6vw, 78px) clamp(56px, 7vw, 80px);
  align-items: center;
}

.hero__texto { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 28px); }

.antetitulo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: clamp(.6875rem, 1.4vw, .8125rem);
  letter-spacing: 2px;
  color: var(--naranja);
  text-transform: uppercase;
}
.antetitulo::before {
  content: "";
  width: clamp(24px, 3vw, 32px);
  height: 1px;
  background: var(--naranja);
  flex-shrink: 0;
}

.hero h1 {
  font-size: clamp(2.75rem, 6.4vw, 5rem);
  line-height: .98;
  letter-spacing: clamp(-3px, -.4vw, -2px);
  text-wrap: balance;
}
.hero h1 .acento { color: var(--naranja); }

.hero__bajada {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  color: var(--sobre-oscuro);
  max-width: 34ch;
  text-wrap: pretty;
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.hero__acciones .btn { flex: 1 1 260px; }

.hero__garantias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: .875rem;
  color: var(--tenue);
}
.hero__garantias li { list-style: none; }
.hero__garantias { margin: 0; padding: 0; }

/* captura + tarjetas */
.hero__visual { display: flex; justify-content: center; }

.captura-envoltura {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(374px, 100%);
}

.captura {
  padding: clamp(16px, 3vw, 28px);
  background: var(--superficie);
  border: 1px solid var(--chip-oscuro);
}
.captura img { border: 1px solid var(--borde-oscuro); width: 100%; }

.tarjetas { display: flex; flex-wrap: wrap; gap: 12px; }

.tarjeta {
  flex: 1 1 140px;
  background: var(--superficie);
  border: 1px solid var(--chip-oscuro);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tarjeta--destacada { border-color: var(--naranja); }
.tarjeta--secundaria { border-color: #3A3A3A; }
.tarjeta__etiqueta {
  font-family: var(--display);
  font-size: .6875rem;
  letter-spacing: 1.4px;
  color: var(--tenue);
}
.tarjeta__cifra {
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}
.tarjeta__pie { font-size: .75rem; color: var(--tenue); }
.tarjeta__pie--verde { color: var(--verde); }
.tarjeta__cifra--naranja { color: var(--naranja); }

/* ---------------------------------------------------------------- franja */

.franja {
  background: var(--naranja);
  color: var(--negro);
}
.franja ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 18px;
  margin: 0;
  padding-block: 16px;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(.75rem, 1.3vw, .9375rem);
  font-weight: 500;
  letter-spacing: .4px;
}

/* -------------------------------------------------------------- secciones */

.seccion { padding-block: var(--seccion) 0; }
.seccion:last-of-type { padding-bottom: var(--seccion); }

.seccion__cabeza {
  display: grid;
  gap: clamp(16px, 3vw, 40px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.seccion__cabeza p { margin: 0; color: var(--tinta-media); }

.rotulo {
  font-family: var(--display);
  font-size: clamp(.6875rem, 1.3vw, .8125rem);
  letter-spacing: 2px;
  color: var(--tinta-suave);
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}
.rotulo--naranja { color: var(--naranja); }

h2 {
  font-size: clamp(1.875rem, 4.2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: clamp(-1.8px, -.15vw, -1.2px);
  text-wrap: balance;
}
h2.h2--medio { font-size: clamp(1.75rem, 3.6vw, 2.875rem); line-height: 1.06; }

/* ------------------------------------------------------------- ecosistema */

/* La grilla usa gap de 1px sobre fondo con color: así las líneas
   entre celdas nunca se duplican. */
.ecosistema {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
}
.modulo {
  background: var(--blanco);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  gap: 22px;
  min-height: 172px;
}
.modulo__n {
  font-family: var(--display);
  font-size: .875rem;
  font-weight: 700;
  color: var(--naranja);
  flex-shrink: 0;
}
.modulo__cuerpo { display: flex; flex-direction: column; gap: 11px; }
.modulo h3 { font-size: clamp(1.25rem, 2vw, 1.5625rem); letter-spacing: -.6px; }
.modulo p { margin: 0; font-size: .9375rem; color: var(--tinta-media); }

.modulo--oscuro { background: var(--negro); color: var(--crema); }
.modulo--oscuro p { color: var(--sobre-oscuro); }
.modulo--oscuro .modulo__cuerpo { justify-content: space-between; gap: 16px; }

.insignia {
  align-self: flex-start;
  font-family: var(--display);
  font-size: .6875rem;
  letter-spacing: 1.4px;
  font-weight: 500;
  color: var(--naranja);
  border: 1px solid var(--naranja);
  padding: 5px 10px;
}
.enlace-flecha { font-family: var(--display); font-weight: 500; font-size: .9375rem; }

/* ------------------------------------------------------------ dos columnas */

.duo {
  display: grid;
  gap: clamp(32px, 5vw, 48px);
  align-items: center;
}

.panel {
  background: var(--blanco);
  border: 1px solid var(--borde);
  padding: clamp(28px, 4vw, 60px);
}

.lista-flechas { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--borde-suave); }
.lista-flechas li {
  display: flex;
  gap: 14px;
  padding-block: 15px;
  border-bottom: 1px solid var(--borde-suave);
  font-size: .9375rem;
}
.lista-flechas li::before {
  content: "→";
  font-family: var(--display);
  font-weight: 700;
  color: var(--naranja);
  flex-shrink: 0;
}
.lista-flechas--borde-fuerte, .lista-flechas--borde-fuerte li { border-color: var(--borde); }

.temas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.5vw, 28px);
  justify-items: center;
  align-items: end;
  max-width: 620px;
  margin-inline: auto;
}
.tema { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; width: 100%; max-width: 276px; }
.tema img { border: 1px solid var(--borde); width: 100%; }
.tema--oscuro img { border-color: var(--borde-oscuro); }
.tema figcaption {
  font-family: var(--display);
  font-size: .75rem;
  letter-spacing: 1.4px;
  color: var(--tinta-suave);
}

/* ------------------------------------------------------------ carta online */

.escaparate {
  background: var(--negro);
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 32px);
}

.carta {
  width: min(286px, 100%);
  background: var(--crema);
  padding: 22px;
  color: var(--tinta);
}
.carta__nombre { font-family: var(--display); font-size: 1.3125rem; font-weight: 700; letter-spacing: -.5px; }
.carta__cabeza { display: flex; flex-direction: column; gap: 2px; padding-bottom: 16px; border-bottom: 2px solid var(--negro); }
.carta__horario { font-size: .75rem; color: var(--tinta-suave); }
.carta__filtros { display: flex; gap: 8px; padding-block: 16px; flex-wrap: wrap; }
.filtro {
  font-family: var(--display);
  font-size: .75rem;
  padding: 6px 12px;
  border: 1px solid var(--borde);
  color: var(--tinta-media);
}
.filtro--activo { background: var(--naranja); border-color: var(--naranja); color: var(--negro); font-weight: 500; }

.plato { display: flex; gap: 12px; align-items: center; padding-block: 13px; border-bottom: 1px solid #E5DED6; }
.plato:last-child { border-bottom: 0; }
.plato__foto { width: 48px; height: 48px; background: #E5DED6; flex-shrink: 0; }
.plato__datos { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
.plato__nombre { font-size: .875rem; font-weight: 600; }
.plato__estado { font-size: .75rem; color: var(--verde); }
.plato__estado--agotado { color: var(--rojo); }
.plato__precio { font-family: var(--display); font-size: .875rem; font-weight: 700; }
.plato--agotado { opacity: .45; }

.qr { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qr__caja { width: 108px; height: 108px; background: var(--crema); display: grid; place-items: center; }
.qr__pie { font-family: var(--display); font-size: .75rem; letter-spacing: 1.4px; color: var(--tinta-suave); text-align: center; }

/* ------------------------------------------------------------- proveedores */

.rubros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.rubro {
  background: var(--blanco);
  border: 1px solid var(--borde);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rubro--destacado { border-color: var(--naranja); }
.rubro__marca { width: 40px; height: 40px; background: #FDE7D6; }
.rubro__marca--verde { background: #E2EFE4; }
.rubro h3 { font-size: 1.125rem; }
.rubro p { margin: 0; font-size: .875rem; color: var(--tinta-suave); }

.cabeza-con-enlace {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* --------------------------------------------------------------- comunidad */

.hilos { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--borde); }
.hilo {
  display: flex;
  gap: clamp(14px, 2vw, 20px);
  align-items: center;
  padding-block: clamp(18px, 2.5vw, 26px);
  border-bottom: 1px solid var(--borde);
}
.hilo__avatar { width: 44px; height: 44px; background: #FDE7D6; flex-shrink: 0; }
.hilo__avatar--verde { background: #E2EFE4; }
.hilo__cuerpo { display: flex; flex-direction: column; gap: 5px; flex-grow: 1; min-width: 0; }
.hilo__titulo { font-family: var(--display); font-size: clamp(.9375rem, 1.6vw, 1.0625rem); font-weight: 700; letter-spacing: -.3px; line-height: 1.35; }
.hilo__autor { font-size: .875rem; color: var(--tinta-suave); }
.hilo__respuestas { font-family: var(--display); font-size: .9375rem; font-weight: 700; color: var(--naranja); flex-shrink: 0; }

/* --------------------------------------------------------------- cierre */

.cierre {
  margin-top: var(--seccion);
  padding-block: clamp(44px, 6vw, 80px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
}
.cierre__texto { max-width: 680px; display: flex; flex-direction: column; gap: 16px; }
.cierre h2 { color: var(--crema); font-size: clamp(2rem, 4.6vw, 3.5rem); letter-spacing: -2px; line-height: 1.02; }
.cierre p { margin: 0; color: var(--sobre-oscuro); font-size: clamp(.9375rem, 1.4vw, 1.125rem); }
.cierre__accion { display: flex; flex-direction: column; gap: 12px; flex: 1 1 280px; }
.cierre__accion small { color: var(--tenue); font-size: .875rem; text-align: center; }

/* ----------------------------------------------------------------- pie */

.pie { padding-block: clamp(36px, 5vw, 52px) 44px; }
.pie__superior {
  display: grid;
  gap: clamp(28px, 4vw, 60px);
  margin-bottom: 40px;
}
.pie__marca { display: flex; flex-direction: column; gap: 12px; max-width: 320px; }
.pie__marca .nombre { font-family: var(--display); font-size: 1.1875rem; font-weight: 700; letter-spacing: -.4px; }
.pie__marca p { margin: 0; font-size: .875rem; color: var(--tinta-suave); }

.pie__columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(24px, 3vw, 56px);
}
.pie__columnas h3 { font-size: .875rem; margin-bottom: 11px; }
.pie__columnas ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.pie__columnas a { color: var(--tinta-media); font-size: .875rem; }
.pie__columnas a:hover { color: var(--naranja); }

.pie__legal {
  border-top: 1px solid var(--borde);
  padding-top: 24px;
  font-size: .8125rem;
  color: var(--tinta-suave);
}

/* ========================================================== puntos de corte */

@media (min-width: 700px) {
  .seccion__cabeza { grid-template-columns: 7fr 5fr; }
  .pie__superior { grid-template-columns: auto 1fr; }
  .ecosistema { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Seis módulos en tres columnas: dos filas exactas, sin celdas vacías. */
@media (min-width: 1160px) {
  .ecosistema { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .duo { grid-template-columns: 5fr 7fr; }
  .duo--invertido { grid-template-columns: 7fr 5fr; }
  .hero__acciones .btn { flex: 0 0 auto; }
}

@media (min-width: 1000px) {
  .hero { grid-template-columns: 7fr 5fr; }
  .hero__visual { justify-content: flex-end; }
}

/* Las tarjetas flotan al costado de la captura solo cuando hay espacio de
   sobra en la columna; nunca alcanzan a pisar el texto del hero. */
@media (min-width: 1400px) {
  .captura-envoltura { position: relative; width: 374px; margin-left: auto; }
  .tarjetas { display: contents; }
  .tarjeta { position: absolute; width: 172px; flex: none; }
  .tarjeta--destacada { left: -146px; bottom: 28px; }
  .tarjeta--secundaria { left: -128px; top: 28px; }
}

@media (max-width: 899px) {
  .nav, .acciones .ingresar { display: none; }
  .menu-movil { display: block; }
}

/* En pantallas angostas el botón dice solo "Probar" para no partirse en dos líneas. */
@media (max-width: 479px) {
  .solo-ancho { display: none; }
  .acciones { gap: 6px; }
  .btn--compacto { padding: 12px 16px; }
}

@media (min-width: 900px) {
  .menu-movil__panel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}