/* =====================================================================
   SUGERENCIAS · vista pública  (CSS propio de este módulo)
   Estructura:  [ banner ] ~ola~ [ sección clara con 3 bloques ]
   Solo usa de la web global: la barra de navegación, el pie y el fondo
   de banner del <body> (styles.css). Todo lo demás está definido aquí
   y cuelga de body.sg-page, así que no afecta a otras páginas.
   ===================================================================== */

.sg-page {
  --sg-blue: #5ca8ff;
  --sg-navy: #4f7fd8;
  --sg-ink: #0f1424;          /* texto sobre fondo claro */
  --sg-muted: #5a6582;
  --sg-paper: #ffffff;        /* fondo de la sección clara (debe ser igual al de la ola) */
  --sg-card: #f3f7ff;
  --sg-line: #e2e9f7;
  --sg-radius: 28px;
}

/* ===== 1. BANNER (el fondo es el banner global del <body>) ===== */
.sg-banner {
  position: relative;
  padding: 140px 20px clamp(120px, 15vw, 180px);
  text-align: center;
  color: #fff;
}
.sg-banner h1 {
  font-family: 'Oxanium', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 8.5vw, 64px);
  line-height: 1.08;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .5);
}
.sg-banner h1 span { color: var(--sg-blue); }
.sg-banner p.sg-sub {
  max-width: 640px;
  margin: 14px auto 0;
  font-size: clamp(15px, 3.6vw, 18px);
  color: #d5daf0;
}
.sg-cta {
  display: inline-block;
  margin-top: 26px;
  padding: 14px 32px;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  color: #06101f;
  background: var(--sg-blue);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(92, 168, 255, .45);
  transition: transform .25s, filter .25s;
}
.sg-cta:hover { transform: translateY(-3px); filter: brightness(1.08); }
.sg-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sg-cta[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.sg-closed { max-width: 520px; margin: 14px auto 0; font-size: 14px; color: #ffd45c; }

/* ===== 2. OLA divisoria (dos capas que se deslizan, como el agua) ===== */
.sg-wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;          /* -1px: sin línea entre ola y sección clara */
  height: clamp(70px, 10vw, 120px);
  overflow: hidden;
  pointer-events: none;
}
.sg-wave svg {
  position: absolute;
  bottom: 0; left: 0;
  width: 200%; height: 100%;                /* el dibujo se repite 2 veces: -50% encaja sin saltos */
  animation: sgDrift 16s linear infinite;
}
.sg-wave .back { animation-duration: 26s; animation-direction: reverse; }
@keyframes sgDrift { to { transform: translateX(-50%); } }

/* ===== 3. SECCIÓN CLARA con los bloques ===== */
.sg-light {
  background: var(--sg-paper);
  color: var(--sg-ink);
  padding: 20px 14px 50px;
}
.sg-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  max-width: 1280px;
  margin: 0 auto;
}
@media (min-width: 900px) { .sg-blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } }

.sg-block {
  position: relative;
  overflow: hidden;
  border-radius: var(--sg-radius);
  transition: transform .3s ease, box-shadow .3s ease;
}
.sg-block:hover { transform: translateY(-4px); }
.sg-block h2 { font-weight: 800; line-height: 1.15; letter-spacing: -.4px; }
.sg-block p { line-height: 1.55; }

/* bloques 1 y 3: texto a un lado, mob a un costado (sin recortarlo) */
.sg-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(104px, 36%, 160px);
  align-items: center;
  gap: 10px;
  min-height: 270px;
  padding: 32px 14px 32px 30px;
  background: var(--sg-card);
  border: 1px solid var(--sg-line);
  box-shadow: 0 10px 30px rgba(36, 60, 120, .08);
}
.sg-side::before {                       /* resplandor suave detrás del mob */
  content: "";
  position: absolute;
  right: -40px; top: 50%;
  width: 230px; height: 230px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(92, 168, 255, .22), transparent 68%);
  pointer-events: none;
}
.sg-side:hover { box-shadow: 0 18px 40px rgba(36, 60, 120, .16); }

/* colores temáticos: amarillo (camello) y verde lima (tortuga), muy suaves */
.sg-yellow {
  --tone: #f5b700;
  background: linear-gradient(135deg, #fffdf2, #fff6cf);
  border-color: #f6e8a8;
  box-shadow: 0 10px 30px rgba(214, 160, 0, .12);
}
.sg-yellow::before { background: radial-gradient(circle, rgba(245, 183, 0, .24), transparent 68%); }
.sg-yellow:hover { box-shadow: 0 18px 40px rgba(214, 160, 0, .22); }
.sg-lime {
  --tone: #84cc16;
  background: linear-gradient(135deg, #fbfff0, #ecfacb);
  border-color: #d9efa6;
  box-shadow: 0 10px 30px rgba(101, 163, 13, .12);
}
.sg-lime::before { background: radial-gradient(circle, rgba(132, 204, 22, .26), transparent 68%); }
.sg-lime:hover { box-shadow: 0 18px 40px rgba(101, 163, 13, .22); }
.sg-yellow .sg-mob { filter: drop-shadow(0 12px 12px rgba(160, 110, 0, .25)); }
.sg-lime .sg-mob { filter: drop-shadow(0 12px 12px rgba(60, 110, 10, .25)); }
.sg-side .sg-copy::before {              /* pequeño detalle de color sobre el título */
  content: "";
  display: block;
  width: 38px; height: 5px;
  margin-bottom: 14px;
  border-radius: 99px;
  background: var(--tone, var(--sg-blue));
}
.sg-side h2 { margin-bottom: 10px; font-size: clamp(22px, 2.1vw, 27px); }
.sg-side p { font-size: 15.5px; color: var(--sg-muted); }
.sg-copy { position: relative; z-index: 1; min-width: 0; }
.sg-mob {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(36, 60, 120, .22));
  animation: sgFloat 5s ease-in-out infinite;
}
.sg-side:nth-of-type(3) .sg-mob { animation-delay: -2.5s; }
@keyframes sgFloat { 50% { transform: translateY(-6px); } }

/* bloque 2: mismo diseño que los laterales, en azul suave, con calendario como "mob" */
.sg-blue {
  --tone: #3f7fe3;
  background: linear-gradient(135deg, #f7faff, #dfecff);
  border-color: #cfe0fb;
  box-shadow: 0 10px 30px rgba(47, 102, 214, .12);
}
.sg-blue::before { background: radial-gradient(circle, rgba(63, 127, 227, .24), transparent 68%); }
.sg-blue:hover { box-shadow: 0 18px 40px rgba(47, 102, 214, .22); }
.sg-blue .sg-mob { filter: drop-shadow(0 12px 12px rgba(30, 70, 160, .25)); }
.sg-date {
  display: block;
  margin-top: 12px;
  font-family: 'Oxanium', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -.2px;
  color: #1f4fb8;
  text-wrap: balance;
}

/* ===== 3b. PIE: fondo blanco continuo y, por encima, la caja oscura del footer ===== */
.sg-foot {
  display: flow-root;
  padding: 10px 14px 34px;
  background: var(--sg-paper);             /* mismo blanco que la sección de bloques: se ve continuo */
}
.sg-foot footer {
  margin: 0 auto;                          /* el espacio lo da .sg-foot */
  background: #10121e;                     /* sólido: sobre blanco el translúcido original se vería gris */
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 18px 44px rgba(16, 24, 56, .28);
}

/* ===== 4. FORMULARIO (ventana) ===== */
/* sin esto, el display:grid del formulario ignora el atributo hidden y el editor seguía visible junto al "gracias" */
.sg-page [hidden] { display: none !important; }

.sg-page .idea-dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto; padding: 0; overflow: auto;
  color: var(--sg-ink);
  background: #fff;
  border: 1px solid var(--sg-line);
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(8, 12, 30, .45);
}
.sg-page .idea-dialog::backdrop { background: rgba(8, 10, 22, .65); backdrop-filter: blur(6px); }
.sg-page .idea-dialog[open] { animation: sgRise .35s ease both; }
@keyframes sgRise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.sg-page .dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--sg-line); }
.sg-page .dlg-head h2 { font-family: 'Oxanium', sans-serif; font-weight: 800; font-size: 22px; }
.sg-page .dlg-x { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--sg-muted); background: var(--sg-card); border: 0; cursor: pointer; }
.sg-page .dlg-x:hover { background: var(--sg-line); color: var(--sg-ink); }
.sg-page .dlg-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.sg-page .dlg-body { display: grid; gap: 16px; padding: 20px 22px; }
.sg-page .who { display: flex; align-items: flex-end; gap: 14px; }
.sg-page .who img { flex: none; width: 56px; height: 56px; border-radius: 12px; image-rendering: pixelated; background: var(--sg-card); }
.sg-page .grow { flex: 1; min-width: 0; }
.sg-page .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.sg-page .field label { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--sg-ink); }
.sg-page .field input,
.sg-page .field select,
.sg-page .field textarea {
  width: 100%; padding: 11px 14px;
  font: inherit; font-size: 15px; color: var(--sg-ink);
  background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: 12px;
}
.sg-page .field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.sg-page .field input:focus-visible,
.sg-page .field select:focus-visible,
.sg-page .field textarea:focus-visible { outline: 2px solid var(--sg-blue); outline-offset: 1px; background: #fff; }
.sg-page .count { font-weight: 500; color: var(--sg-muted); }
.sg-page .count.warn { color: #c77700; }
.sg-page .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* trampa para bots */
.sg-page .form-msg { padding: 10px 14px; border-radius: 12px; font-size: 14px; color: #a11b1b; background: #fdecec; border: 1px solid #f3b8b8; }
.sg-page .fine { font-size: 12.5px; color: var(--sg-muted); }

.sg-page .dlg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--sg-line); }
.sg-page .btn { padding: 11px 20px; font: inherit; font-size: 14px; font-weight: 700; color: var(--sg-ink); background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: 12px; cursor: pointer; transition: .2s; }
.sg-page .btn:hover { border-color: var(--sg-blue); }
.sg-page .btn.primary { color: #06101f; font-weight: 800; background: var(--sg-blue); border-color: var(--sg-blue); }
.sg-page .btn.primary:hover { filter: brightness(1.08); }
.sg-page .btn[disabled] { opacity: .55; cursor: wait; }

.sg-page .dlg-done { padding: 40px 28px; text-align: center; }
.sg-page .dlg-done h3 { margin: 14px 0 6px; font-family: 'Oxanium', sans-serif; font-size: 24px; }
.sg-page .dlg-done p { color: var(--sg-muted); }
.sg-page .done-icon { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto; border-radius: 50%; font-size: 34px; font-weight: 800; color: #06210f; background: #1ed760; box-shadow: 0 0 0 8px rgba(30, 215, 96, .18); }

/* ===== 5. AVISO Y CONFETI ===== */
.sg-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 200;
  max-width: calc(100vw - 32px); padding: 12px 20px;
  font-size: 14px; font-weight: 600; color: #fff;
  background: #151827; border: 1px solid rgba(255, 255, 255, .15); border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: .3s;
}
.sg-toast.show { opacity: 1; transform: translate(-50%, 0); }
.sg-toast.err { color: #ffb3b3; border-color: rgba(255, 77, 77, .6); }
.confetti { position: fixed; top: 0; left: 0; z-index: 300; width: 10px; height: 14px; border-radius: 2px; pointer-events: none; animation: sgFall 1.4s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes sgFall { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }

/* ===== 6. RESPONSIVE Y MOVIMIENTO REDUCIDO ===== */
@media (max-width: 560px) {
  .sg-page .two { grid-template-columns: 1fr; }
  .sg-side { min-height: 0; padding: 24px 8px 24px 22px; grid-template-columns: minmax(0, 1fr) 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-wave svg, .sg-page .idea-dialog[open] { animation: none; }
  .sg-block, .sg-cta { transition: none; }
  .sg-mob { animation: none; }
  .confetti { display: none; }
}