/*
  Modern one‑page layout inspired by the provided design mock‑ups.

  This stylesheet defines a dark hero and process section contrasted
  against light content sections.  It uses CSS variables to define
  colours and spacing, making it easy to adjust the palette.  The
  layout is responsive, leveraging flexbox and grid where
  appropriate.  Radio and checkbox inputs are hidden and replaced
  with bespoke card components that reflect their checked state.
*/

/* Colour palette */
:root {
  --clr-primary: #7c3aed; /* purple */
  --clr-primary-dark: #5b21b6;
  --clr-accent: #0ea5e9; /* cyan */
  --clr-bg-dark-start: #0f172a; /* hero gradient start */
  --clr-bg-dark-end: #060c23;   /* hero gradient end */
  --clr-bg-process-start: #0e1932; /* slightly lighter dark */
  --clr-bg-process-end: #06112b;
  --clr-bg-light: #ffffff;
  --clr-bg-muted: #f9fafb;
  --clr-text-dark: #0f172a;
  --clr-text: #374151;
  --clr-text-light: #e2e8f0;
  --clr-muted: #94a3b8;
  --clr-border: #e5e7eb;
  --grid-line: rgba(255, 255, 255, 0.04);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    sans-serif;
  line-height: 1.6;
  color: var(--clr-text);
  background-color: var(--clr-bg-light);
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.2;
  font-weight: 700;
  color: var(--clr-text-dark);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Hero section */
header#hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  padding: 4rem 1rem 6rem;
  color: var(--clr-text-light);
  overflow: hidden;
  background-image: linear-gradient(135deg, var(--clr-bg-dark-start), var(--clr-bg-dark-end));
}

/* Grid overlay */
header#hero .hero-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}

header#hero .hero-content {
  position: relative;
  max-width: 1000px;
  text-align: center;
  z-index: 1;
}

/* Site logo at top of hero */
.site-logo {
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin: 0 auto 1rem;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  padding: 0px;
}

header#hero .hero-tag {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clr-text-light);
  background: linear-gradient(90deg, var(--clr-primary) 0%, var(--clr-accent) 100%);
  border-radius: 9999px;
}

header#hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 1rem;
}

header#hero .gradient-text {
  display: inline-block;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

header#hero .gradient-text::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-primary));
  border-radius: 3px;
}

header#hero .hero-subtitle {
  max-width: 640px;
  margin: 0 auto 2rem;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Hero buttons */
.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: 0.625rem;
  cursor: pointer;
  font-size: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
}

.btn.primary {
  background: linear-gradient(90deg, var(--clr-primary) 0%, var(--clr-accent) 100%);
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn.primary .arrow {
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
}

.btn.primary:hover .arrow {
  transform: translateX(4px);
}

.btn.secondary {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Illustration in hero */
.hero-illustration {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2rem;
  margin-top: 4rem;
  flex-wrap: wrap;
}

.mockup {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  backdrop-filter: blur(2px);
  position: relative;
}

.mockup.web {
  width: 300px;
  height: 180px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mockup.web .bar {
  height: 20px;
  width: 100%;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-primary));
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.mockup.web .content {
  flex: 1;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
}

.mockup.app {
  width: 120px;
  height: 220px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mockup.app .screen {
  height: 170px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.mockup.app .footer {
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-primary));
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  overflow: hidden;
}

.scroll-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: scrollBounce 2s infinite;
}

@keyframes scrollBounce {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(14px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Section layouts */
.dark-section {
  background-image: linear-gradient(135deg, var(--clr-bg-process-start), var(--clr-bg-process-end));
  color: var(--clr-text-light);
  padding: 5rem 1rem;
  text-align: center;
}

.light-section {
  background-color: var(--clr-bg-muted);
  color: var(--clr-text-dark);
  padding: 5rem 1rem;
  text-align: center;
}

.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-primary);
  margin-bottom: 0.5rem;
}

.section-subtitle {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  font-size: 1rem;
  color: var(--clr-muted);
}

/* Process grid */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.process-card {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 2rem 1.5rem 2.5rem;
  text-align: left;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.process-card::before {
  content: attr(data-step);
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 4rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.05);
  z-index: 0;
}

.process-card .icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 1rem;
  z-index: 1;
}

.process-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
  z-index: 1;
  position: relative;
}

.process-card p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  z-index: 1;
  position: relative;
}

/* Benefits grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.benefits-grid li {
  background-color: var(--clr-bg-light);
  border: 1px solid var(--clr-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.benefits-grid li::before {
  content: attr(data-icon);
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--clr-primary);
}

.benefits-grid li strong {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--clr-text-dark);
}

.benefits-grid li p {
  font-size: 0.95rem;
  color: var(--clr-text);
  margin: 0;
}

/* Styles selection cards */
.styles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.styles-grid input[type="radio"] {
  display: none;
}

.style-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: var(--clr-bg-light);
  color: var(--clr-text-dark);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.style-card .thumb {
  width: 100%;
  height: 120px;
}

/* Individual style backgrounds */
.style-card.minimalista .thumb {
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}
.style-card.moderno .thumb {
  background: linear-gradient(135deg, #3b82f6, #a855f7);
}
.style-card.corporativo .thumb {
  background: linear-gradient(135deg, #1e40af, #1e3a8a);
}
.style-card.creativo .thumb {
  background: linear-gradient(135deg, #f97316, #facc15);
}
.style-card.tecnologico .thumb,
.style-card.tecnologico .thumb.tecnologico {
  background: linear-gradient(135deg, #0d9488, #0f766e);
}

.style-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 1rem 1rem 0.5rem;
}

.style-card ul {
  margin: 0 1rem 1rem;
  padding: 0;
  list-style: none;
}

.style-card ul li {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  color: var(--clr-muted);
}

/* Selected style card */
.styles-grid input[type="radio"]:checked + .style-card {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);
}

/* Project type cards */
.project-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}

.project-type-grid input[type="radio"] {
  display: none;
}

.project-card {
  background-color: var(--clr-bg-light);
  border: 2px solid var(--clr-border);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.project-card .icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: var(--clr-primary);
}

.project-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: var(--clr-text-dark);
}

.project-card p {
  font-size: 0.9rem;
  margin: 0;
  color: var(--clr-muted);
}

.project-type-grid input[type="radio"]:checked + .project-card {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Form styles */
form {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full {
  grid-column: 1 / -1;
}

.form-group label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--clr-text-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.75rem 1rem;
  border: 1px solid var(--clr-border);
  border-radius: 0.5rem;
  font-size: 1rem;
  color: var(--clr-text);
  background-color: var(--clr-bg-light);
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}

.features-grid label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--clr-text);
}

.features-grid input[type="checkbox"] {
  accent-color: var(--clr-primary);
}

button.btn.submit {
  margin-top: 2rem;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent));
  color: #ffffff;
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  padding: 0.8rem 2rem;
  font-weight: 600;
  cursor: pointer;
  align-self: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: block;
}

button.btn.submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.success-message {
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  background-color: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  border-radius: 0.5rem;
  font-weight: 600;
  text-align: center;
}

/* Footer */
footer {
  background-color: var(--clr-bg-dark-start);
  color: var(--clr-text-light);
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.875rem;
}

/* Responsive typography adjustments */
@media (max-width: 768px) {
  header#hero h1 {
    font-size: 2.5rem;
  }
  .hero-illustration {
    margin-top: 2rem;
    gap: 1rem;
  }
  .mockup.web {
    width: 260px;
    height: 160px;
  }
  .mockup.app {
    width: 100px;
    height: 200px;
  }
}