/* === Paleta de colores ===
   Vino oscuro: #320A28
   Vino:        #511730
   Amarillo:    #F4FE81
   Malva:       #B185A7
   Blanco:      #FFFFFF
*/
:root{
  --vino-oscuro: #320A28;
  --vino:        #511730;
  --amarillo:    #F4FE81;
  --malva:       #B185A7;
  --white:       #FFFFFF;

  --text: #111111;   
  --muted: #6b6b6b;
}

*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
img{ max-width: 100%; display: block; }

body{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--vino);
  color: var(--text);
  min-height: 100svh;
}

.wrapper{
  max-width: 1100px;
  margin: 32px auto;
  background: var(--white);
  padding: clamp(20px, 3.5vw, 40px);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.tabs{
  display: flex;
  gap: 20px;
  margin-bottom: clamp(16px, 2.5vw, 28px);
}
.tabs a{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  transition: background-color .15s ease, transform .05s ease;
}
.tabs a:hover,
.tabs a:focus{
  background: rgba(0,0,0,.06);
  outline: none;
}
.tabs a.is-current{
  background: rgba(0,0,0,.08);
}

h1{
  font-weight: 600;
  font-size: clamp(28px, 6vw, 56px);
  line-height: 1.05;
  margin: 0 0 8px 0;
}

.lead{
  color: var(--muted);
  font-size: clamp(16px, 2.4vw, 20px);
  margin: 0 0 20px 0;
}
.list{
  margin: 0;
  padding-left: 22px;
  font-size: clamp(16px, 2.2vw, 20px);
}
.link{
  color: var(--vino-oscuro);
  text-decoration: none;
}
.link:hover,
.link:focus{
  text-decoration: underline;
}