:root {
  --bg-1: #f6f0ff;
  --bg-2: #e6f0ff;
  --text: #0f172a;
  --muted: #475569;
  --primary: #5b4cf0;
  --primary-600: #4a3de0;
  --surface: #ffffff;
  --border: #e2e8f0;
  --shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
}

/* Reset básico */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 10% 10%, var(--bg-1), transparent),
    radial-gradient(1200px 600px at 90% 10%, var(--bg-2), transparent),
    #fbfbfe;
  line-height: 1.6;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}

/* Fondo slideshow (sin blur) */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: crossfade 30s infinite ease-in-out;
  transform: scale(1.02);
}

/* Escalonado para 5 imágenes */
.bg img:nth-child(1) { animation-delay: 0s; }
.bg img:nth-child(2) { animation-delay: 6s; }
.bg img:nth-child(3) { animation-delay: 12s; }
.bg img:nth-child(4) { animation-delay: 18s; }
.bg img:nth-child(5) { animation-delay: 24s; }

/* Overlays del slideshow */
.bg::before,
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Tinte verde oscuro potente */
.bg::before {
  background: rgba(9, 46, 28, 0.55); /* sube a 0.65 si quieres aún más */
  mix-blend-mode: multiply;          /* realza el verde sin lavar la foto */
}

/* Viñeteado muy sutil para contrastar el contenido */
.bg::after {
  background:
    radial-gradient(120% 100% at 50% 100%, rgba(0,0,0,.16), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0.02));
}

/* Crossfade: nunca a blanco (siempre hay solape) */
@keyframes crossfade {
  /* ciclo de 30s: 0-6s por imagen con solape de 1.5s */
  0%   { opacity: 0; }
  5%   { opacity: 1; }   /* fade in ~1.5s */
  25%  { opacity: 1; }   /* visible ~6s * 0.20 */
  30%  { opacity: 0; }   /* fade out ~1.5s, se solapa con la siguiente */
  100% { opacity: 0; }
}

/* Cabecera */
header { padding: 16px; display: flex; align-items: center; justify-content: center; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .2px; }
.brand svg { 
	width: 35px;
    height: 35px;
    margin-bottom: -7px;
    margin-right: -12px;
}

/* Layout */
.wrap { padding: 24px 16px 40px; display: grid; place-items: center; }

/* Card con frosted glass (solo aquí) */
.card {
    width: 100%;
    max-width: 880px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 50px;
}

.hero { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }

.illustration {
  display: grid; place-items: center;
  background: linear-gradient(180deg, #ffffff, #f6f7ff);
  border: 1px dashed #dbeafe;
  border-radius: 16px;
  padding: 24px;
}

/* Tipografías */
.title { font-size: clamp(1.4rem, 1rem + 2.2vw, 2.2rem); line-height: 1.2; margin: 0 0 8px; text-align: center; }
.lead, .body { color: var(--muted); }
.body p { margin: 0 0 12px; }

/* Botones y acciones */
.actions { 
	margin-top: 20px;    
	justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center; gap: 12px;
}
.btn {
  display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    background: black;
    color: #fff;
    font-weight: 600;
    padding: 14px 18px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .04s ease, background .2s ease;
}
.btn:hover { background: var(--primary-600); }
.btn:active { transform: translateY(1px); }
.note { text-align: center; font-size: 13px; color: var(--muted); margin-top: 8px; text-decoration:underline;}

/* Pie */
footer { padding: 24px 12px 40px; text-align: center; color: white; font-size: .9rem; }

/* Responsive */
@media (min-width: 780px) {
  .title { text-align: left; }
  .actions { grid-auto-flow: column; justify-content: start; }
}

/* ===== Modal (prefijo t-) ===== */
.t-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; place-items: center;
}
.t-modal.is-open { display: grid; }

.t-backdrop {
  position: absolute; inset: 0;
  background:
    radial-gradient(100% 100% at 50% 30%, rgba(0,0,0,.40), rgba(0,0,0,.55));
  /* ligero frost al fondo */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.t-card {
  position: relative;
  width: min(560px, 92vw);
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(2,6,23,.30);
  padding: 55px 22px;
  /* efecto frosted coherente con tu .card */
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  transform: translateY(6px) scale(.98);
  opacity: 0;
  animation: tModalIn .18s ease-out forwards;
}

@keyframes tModalIn {
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.t-close {
  position: absolute; top: 10px; right: 12px;
  width: 36px; height: 36px;
  border: 0; border-radius: 10px;
  background: rgba(255,255,255,.65);
  color: var(--text); font-size: 22px; line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.t-close:hover { background: rgba(255,255,255,.85); }

/* Ajustes tipográficos dentro del modal */
.t-modal .title { text-align: center; }
.t-modal .lead  { color: var(--muted); }