/* ───────────────────────────────────────────
   main.css – Estilos compartidos
   Partido de Leyendas · La Finca de Ellas
─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=Lato:wght@400;700&display=swap');

:root {
  --terracota:   #B84A2F;
  --terracota-d: #8E321A;
  --naranja:     #E97820;
  --naranja-d:   #C45E0A;
  --cream:       #FBF5EE;
  --text:        #2C1A10;
  --muted:       #7A5C4A;
  --white:       #FFFFFF;
  --green:       #2D7A44;
  --green-bg:    #E8F7EE;
  --yellow:      #B8860B;
  --yellow-bg:   #FFF8DC;
  --red:         #C0392B;
  --red-bg:      #FDE8E6;
  --radius:      14px;
  --shadow:      0 2px 20px rgba(44,26,16,.1);
}

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

body {
  font-family: 'Lato', sans-serif;
  background: var(--cream);
  color: var(--text);
  line-height: 1.6;
}

a { color: var(--terracota); }

/* ── Tipografía ── */
h1, h2, h3 { font-family: 'Montserrat', sans-serif; }
h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 900; }
h2 { font-size: 1.4rem; font-weight: 800; color: var(--terracota-d); margin-bottom: 12px; }
h3 { font-size: 1.1rem; font-weight: 700; }

/* ── Botones ── */
.btn {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: .9rem;
  padding: 11px 22px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, opacity .15s;
  letter-spacing: .02em;
}
.btn:hover { transform: translateY(-1px); opacity: .93; }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--terracota); color: var(--white); box-shadow: 0 4px 14px rgba(184,74,47,.35); }
.btn-naranja  { background: var(--naranja);   color: var(--white); box-shadow: 0 4px 14px rgba(233,120,32,.35); }
.btn-green    { background: var(--green);     color: var(--white); box-shadow: 0 4px 14px rgba(45,122,68,.35); }
.btn-outline  { background: transparent; color: var(--terracota); border: 2px solid var(--terracota); }
.btn-sm       { font-size: .8rem; padding: 7px 16px; }
.btn-block    { display: block; width: 100%; text-align: center; }

/* ── Cards ── */
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

/* ── Badges de estado ── */
.badge-estado {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.badge-pendiente  { background: var(--yellow-bg); color: var(--yellow); }
.badge-aprobado   { background: var(--green-bg);  color: var(--green);  }
.badge-rechazado  { background: var(--red-bg);    color: var(--red);    }

/* ── Formularios ── */
.form-group { margin-bottom: 16px; }
label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="file"],
textarea,
select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #DDD0C8;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Lato', sans-serif;
  background: var(--white);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--terracota);
  box-shadow: 0 0 0 3px rgba(184,74,47,.12);
}

/* ── Alertas ── */
.alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: .9rem;
}
.alert-error   { background: var(--red-bg);    color: var(--red);    border-left: 4px solid var(--red); }
.alert-success { background: var(--green-bg);  color: var(--green);  border-left: 4px solid var(--green); }
.alert-warning { background: var(--yellow-bg); color: var(--yellow); border-left: 4px solid var(--yellow); }

/* ── Layout ── */
.container { max-width: 680px; margin: 0 auto; padding: 0 20px; }
.container-wide { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
section { padding: 40px 0; }

/* ── Hero ── */
.hero {
  background: linear-gradient(160deg, var(--terracota-d), var(--terracota) 50%, var(--naranja));
  color: var(--white);
  padding: 32px 20px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='25' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.5'/%3E%3C/svg%3E") repeat;
  pointer-events: none;
}
.hero h1 { color: var(--white); }
.hero h1 span { color: #FFD780; }
.hero p { opacity: .92; max-width: 520px; margin: 0 auto 24px; }
.hero-badge {
  display: inline-block;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 100px;
  padding: 6px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--white);
}

/* ── Divider ── */
hr { border: none; border-top: 1.5px solid #E8DDD5; }

/* ── Section label ── */
.section-label {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--terracota);
  margin-bottom: 6px;
}

/* ── Footer ── */
footer {
  background: var(--terracota-d);
  color: rgba(255,255,255,.8);
  text-align: center;
  padding: 24px 20px;
  font-size: .88rem;
  margin-top: 48px;
}
footer strong { color: var(--white); }