:root{
    --flask-color: #FF6F00;    /* orange */
    --django-color: #0C6B3F;   /* green */
    --react-color: #007ACC;    /* blue */
    --laravel-color: #E3342F;  /* red */
    --dotnet-color: #6A1B9A;   /* purple */
    --djrn-color: #0A7397;   /* purple */
  }


    body {
      font-family: "Lato", sans-serif;
      margin: 0;
      background: #f4f6f8;
      color: #222;
      display: flex;
      flex-direction: column;
      /* organiza header, main y footer verticalmente */
      min-height: 100vh;
      /* mínimo 100% de la altura de la ventana */
      margin: 0;

    }

    /* Wrapper around main content to push footer down */
.content-wrapper {
    flex: 1 0 auto; /* grows to fill available space */
    width: 100%; /* full width of the page */
    box-sizing: border-box; /* include padding in width calculation */
    padding: 20px; /* optional spacing inside the wrapper */
}


  p.intro {
    margin-bottom: 12px;
  }

  /* Tab buttons */
  .tablink {
    background-color: #555;
    color: white;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 12px 14px;
    font-size: 16px;
    width: 20%;
    float: left;
    box-sizing: border-box;
    transition: background-color .15s ease;
  }
  .tablink:hover { background-color: #777; }

  /* Clearfix for buttons row */
  .tab-buttons { overflow: hidden; margin-bottom: 18px; border-radius: 6px; }

  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 24px;
    text-align: left;
    border-radius: 8px;
    color: #fff;
    box-sizing: border-box;
    margin-bottom: 20px;
  }

  /* Specific background colors */
  #Flask    { background-color: var(--flask-color); }
  #Django   { background-color: var(--django-color); }
  #React    { background-color: var(--react-color); }
  #Laravel  { background-color: var(--laravel-color); }
  #DotNet   { background-color: var(--dotnet-color); }

  /* Row of cards: 3 per row */
  .row {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 12px;
  }

  .card {
    background: #ffffff;
    color: #111;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    width: calc((100% / 3) - 10.666px); /* 3 cards per row with gap */
    box-sizing: border-box;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .card h3 { margin: 0 0 8px 0; font-size: 18px; }
  .card p { margin: 0 0 12px 0; font-size: 14px; line-height:1.4; color:#333; }

  .card .card-btn {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
  }

  /* Buttons inside cards match the tab color for visual consistency */
  /* Flask */
  #Flask .card .card-btn { background: var(--flask-color); border: 2px solid rgba(0,0,0,0.06); }
  /* Django */
  #Django .card .card-btn { background: var(--django-color); }
  /* React */
  #React .card .card-btn { background: var(--react-color); }
  /* Laravel */
  #Laravel .card .card-btn { background: var(--laravel-color); }
  /* .NET (purple) */
  #DotNet .card .card-btn { background: var(--dotnet-color); }

  /* Responsive: on narrow screens stack cards */
  @media (max-width: 900px){
    .card { width: calc((100% / 2) - 8px); } /* 2 per row on medium screens */
    .tablink { font-size: 15px; padding: 10px; }
  }
  @media (max-width: 600px){
    .card { width: 100%; } /* 1 per row on small screens */
    .tablink { width: 50%; float: left; }
  }