:root{
      --ink:#121212;
      --paper:#ffffff;
      --line:#1b1b1b;
      --muted:#6b6b6b;

      --mint:#bff0d5;
      --lilac:#e6b8ff;
      --aqua:#a9f0ff;
      --yellow:#f7f06a;

      --radius:22px;
      --radius-sm:14px;
      --shadow:0 10px 30px rgba(0,0,0,.10);
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: #f5f5f5;
      color:var(--ink);
    }

    /* Lienzo centrado tipo poster */
    .page{
      max-width: 980px;
      margin: 0 auto;
      padding: 22px 16px 80px;
    }
    .poster{
      background:var(--paper);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 34px 22px 26px;
      border: 2px solid rgba(0,0,0,.08);
      overflow:hidden;
    }

    /* Header: “AGENDA TUS FINES…” style */
    .headline{
      text-align:center;
      line-height: .92;
      margin: 6px 0 16px;
    }
    .headline .big{
      font-family:Anton, Impact, Haettenschweiler, "Arial Black", sans-serif;
      letter-spacing: .5px;
      font-size: clamp(44px, 8vw, 96px);
      margin:0;
      text-transform:uppercase;
    }
    .headline .big span{display:block}
    .subrow{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      flex-wrap:wrap;
      margin-top:14px;
    }

    /* Stickers */
    .sticker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 14px;
      border: 2px solid var(--line);
      border-radius: 999px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .2px;
      font-size: 14px;
      box-shadow: 0 6px 0 rgba(0,0,0,.10);
      transform: rotate(-2deg);
      user-select:none;
      white-space:nowrap;
    }
    .sticker.mint{background:var(--mint)}
    .sticker.lilac{background:var(--lilac)}
    .sticker.yellow{background:var(--yellow); transform: rotate(2deg);}

    /* Logos row */
    .logos{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:22px;
      margin: 18px 0 22px;
      flex-wrap:wrap;
    }
    .logoBox{
      display:flex;
      align-items:center;
      justify-content:center;
      width:min(240px, 42vw);
      height:80px;
      border-radius: 18px;
      border: 2px dashed rgba(0,0,0,.18);
      color:rgba(0,0,0,.35);
      font-weight:800;
      text-transform:uppercase;
      font-size:12px;
    }

    /* Sección calendario */
    .sectionTitle{
      font-family:Anton, Impact, Haettenschweiler, "Arial Black", sans-serif;
      letter-spacing:.5px;
      text-transform:uppercase;
      font-size: clamp(34px, 6vw, 64px);
      text-align:center;
      margin: 10px 0 14px;
      line-height:.95;
    }

    .calendarWrap{
      margin-top: 12px;
      border: 2px solid var(--line);
      border-radius: var(--radius);
      overflow:hidden;
      background:#fff;
    }

    table.calendar{
      width:100%;
      border-collapse:collapse;
      table-layout:fixed;
      font-size: 14px;
    }
    .calendar th, .calendar td{
      border-right: 2px solid var(--line);
      border-bottom: 2px solid var(--line);
      padding: 12px 10px;
      vertical-align:middle;
    }
    .calendar tr:last-child td{border-bottom:none}
    .calendar td:last-child, .calendar th:last-child{border-right:none}

    /* Columna MES */
    .monthCell{
      width: 18%;
      font-family:Anton, Impact, Haettenschweiler, "Arial Black", sans-serif;
      text-transform:uppercase;
      letter-spacing:.4px;
      font-size: 20px;
      text-align:center;
    }
    .m-lilac{background: var(--lilac)}
    .m-aqua{background: var(--aqua)}

    /* Columna SEDE */
    .venueCell{
      width: 12%;
      text-align:center;
      color:rgba(0,0,0,.45);
      font-weight:800;
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.4px;
    }

    /* Texto (edición y fechas) */
    .place{
      font-weight:800;
      text-transform:uppercase;
      font-size: 12px;
      letter-spacing:.3px;
    }
    .date{
      font-weight:600;
      color:var(--ink);
      font-size: 13px;
    }

    .time{
      width: 12%;
      font-weight:800;
      text-transform:uppercase;
      font-size: 12px;
      color:var(--ink);
      white-space:nowrap;
      text-align:center;
    }

    /* Botones por fila */
    .ctaCell{
      width: 13%;
      text-align:center;
    }
    .btnRow{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 10px 10px;
      border: 2px solid var(--line);
      border-radius: 999px;
      font-weight: 800;
      text-transform: uppercase;
      font-size: 12px;
      letter-spacing:.2px;
      text-decoration:none;
      color: var(--ink);
      background: var(--mint);
      box-shadow: 0 5px 0 rgba(0,0,0,.10);
      min-width: 110px;
    }
    .btnRow.info{ background: var(--lilac); }
    .btnRow.reserve{ background: var(--yellow); }
    .btnRow:hover{ transform: translateY(-1px); }
    .btnRow:active{ transform: translateY(1px); box-shadow: 0 3px 0 rgba(0,0,0,.10); }

    /* CTA inferior */
    .bottomCtas{
      display:flex;
      gap:12px;
      justify-content:center;
      flex-wrap:wrap;
      margin-top: 18px;
    }
    .pill{
      border:2px solid var(--line);
      border-radius:999px;
      padding: 10px 16px;
      font-weight:800;
      text-transform:uppercase;
      font-size: 13px;
      letter-spacing:.2px;
      background:var(--yellow);
      box-shadow: 0 6px 0 rgba(0,0,0,.10);
      text-decoration:none;
      color:var(--ink);
    }
    .pill.secondary{background:var(--mint)}
    .note{
      margin: 14px auto 0;
      max-width: 820px;
      color: var(--muted);
      font-size: 13px;
      text-align:center;
      line-height:1.35;
    }

   /* Responsive: convierte tabla en cards */
    @media (max-width: 720px){
  .calendarWrap{border-radius: 18px}

  /* ✅ NO escondas la tabla completa */
  .calendar thead{display:none;}
  table.calendar{display:table; width:100%;}

  .calendar tbody, .calendar tr, .calendar td{display:block; width:100%}
  .calendar tr{border-bottom: 2px solid var(--line);}
  .calendar tr:last-child{border-bottom:none}

  .calendar td{
    border-right:none;
    border-bottom: 2px solid rgba(0,0,0,.12);
    padding: 12px 14px;
  }
  .calendar td:last-child{border-bottom:none}

  .monthCell{
    width:auto;
    border-bottom:2px solid var(--line) !important;
    font-size: 22px;
    padding: 14px 14px;
  }
  .venueCell{width:auto; text-align:left; padding-top:10px;}
  .time{width:auto; text-align:left;}

  .ctaCell{width:auto; text-align:left;}
  .btnRow{min-width: 180px;}
}
@media (max-width: 720px){
  table.calendar{display:table !important; width:100% !important;}
  .calendar thead{display:none !important;}
}