/* Real C.D. Carabanchel: the tournaments. Every colour, size, radius, shadow and duration here is a token from the
   top of styles.css; this file defines none of its own. Each tournament is its own poster pasted on the wall of
   the barrio, and the season page is the stretch of wall where the four hang side by side. The sign-up is three
   steps on paper, the summary pinned beside them; the fixtures are the club's own match list. */

[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the poster: the red sheet at the top of a tournament page */
.hero--torneo .sheet--torneos{animation-delay:.1s}
.cartel{display:grid;gap:var(--s-4);align-content:start;color:var(--c-paper);min-width:0}
.cartel__k{font-family:var(--f-display);font-stretch:76%;font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:var(--t-0);color:var(--c-secondary);margin:0}
.cartel__title{font-family:var(--f-display);font-size:min(var(--t-7),15cqi);font-stretch:96%;font-weight:850;line-height:.9;letter-spacing:-.03em;text-transform:uppercase;color:var(--c-paper);margin:0;text-wrap:balance}
.cartel__who{font-family:var(--f-body);font-style:italic;font-size:var(--t-3);line-height:1.25;color:var(--c-secondary);margin:0;max-width:34ch}
.cartel__menores{font-family:var(--f-display);font-stretch:86%;font-weight:700;font-size:var(--t-1);color:var(--c-paper);margin:0}
.cartel__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4);margin:0}
.cartel__nota{font-family:var(--f-display);font-stretch:88%;font-weight:600;font-size:var(--t-1);color:var(--c-paper);margin:0;max-width:40ch}
.sheet--torneos .btn{background:var(--c-paper);color:var(--c-accent);border-color:var(--c-paper)}
.sheet--torneos .btn:hover{background:var(--c-primary);color:var(--c-paper);border-color:var(--c-primary)}
.sheet--torneos .btn--ghost{background:transparent;color:var(--c-paper)}

/* the boxes of the old match posters: the day, the hour, the ground, and now the teams, the price, the places */
.cajas{display:flex;flex-wrap:wrap;gap:var(--s-3);list-style:none;margin:0;padding:0}
.caja{display:grid;gap:var(--s-1);align-content:start;background:var(--c-paper);color:var(--c-ink);border:2px solid var(--c-primary);border-radius:var(--r-a);padding:var(--s-2) var(--s-3);font-family:var(--f-display);font-stretch:82%;flex:1 1 7.5rem;min-width:0}
.caja span{font-size:var(--t-0);text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--c-muted)}
.caja b{font-size:var(--t-2);font-weight:800;line-height:1.05;letter-spacing:-.01em;overflow-wrap:anywhere}
.caja b.is-open,.abierto{font-family:var(--f-body);font-style:italic;font-weight:400;font-size:var(--t-1);color:var(--c-muted);letter-spacing:0}

/* the status: a small square in the status colour, then the word */
.estado{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--f-display);font-stretch:80%;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:var(--t-0);margin:0;color:var(--c-ink)}
.estado::before{content:"";width:.7em;height:.7em;border-radius:var(--r-a);background:var(--c-gold);flex:none}
.estado--inscripcion-abierta::before{background:var(--c-ok)}
.estado--completo::before{background:var(--c-warn)}
.estado--cerrado::before{background:var(--c-muted)}
.estado--jugado::before{background:var(--c-primary)}
.sheet .estado{color:var(--c-paper)}
.sheet .estado--jugado::before{background:var(--c-paper)}

/* the moment: a picture beside its text (the shirt and the strip; the cup and the prizes) */
.momento{display:grid;gap:var(--s-6);align-items:start}
.momento h2{margin-bottom:var(--s-4)}
.camiseta,.copa{margin:0;display:grid;gap:var(--s-2)}
.camiseta img,.copa img{width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:var(--r-a);background:var(--c-secondary);box-shadow:var(--sh-b)}
.copa--ancha img{aspect-ratio:4 / 3}
.camiseta figcaption,.copa figcaption{max-width:var(--measure)}
.ficha{display:grid;grid-template-columns:1fr;gap:var(--s-3);list-style:none;margin:0;padding:0}
.ficha>li{display:grid;gap:var(--s-1);align-content:start;background:var(--c-paper);border:1px solid var(--c-line);border-top:4px solid var(--c-primary);border-radius:var(--r-a);padding:var(--s-3) var(--s-4);min-width:0}
.ficha>li.is-wide{grid-column:1 / -1}
.ficha .k{margin:0}
.ficha b{font-family:var(--f-display);font-weight:800;font-stretch:88%;font-size:var(--t-2);line-height:1.1;letter-spacing:-.01em;overflow-wrap:anywhere}
.ficha b.abierto{font-size:var(--t-1)}
.ficha p{margin:0;font-size:var(--t-0);color:var(--c-muted)}
.ficha p.k{color:var(--c-accent)}
.ficha>li.is-open{border-top-color:var(--c-gold);background:var(--c-secondary)}
.ficha .franjas{margin-top:var(--s-1)}
.ficha .franjas li{font-size:var(--t-1)}

/* the prizes: a list with the prize first */
.premios{margin:0 0 var(--s-4)}
.premios div{display:grid;gap:var(--s-1);padding:var(--s-3) 0;border-top:1px solid var(--c-line)}
.premios dt{font-family:var(--f-display);font-stretch:80%;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:var(--t-0);color:var(--c-accent)}
.premios dd{margin:0;font-family:var(--f-display);font-stretch:88%;font-weight:600;font-size:var(--t-1);line-height:1.3}
.premio__valor{color:var(--c-muted);font-weight:400}

/* the entries: the teams in, or the places per age band */
.inscritos{margin:0;font-family:var(--f-display);font-stretch:88%;font-weight:600;font-size:var(--t-1);line-height:1.5}
.franjas{list-style:none;margin:0;padding:0}
.franjas li{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2);align-items:baseline;padding:var(--s-2) 0;border-top:1px solid var(--c-line);font-family:var(--f-display);font-stretch:88%}
.franjas li b{font-weight:800}
.franjas .cupo{margin-left:auto;font-stretch:84%;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:var(--t-0);color:var(--c-accent)}

/* the season: the four posters on the wall, and the moment that opens it */
.apertura-temporada{display:grid;gap:var(--s-5);align-items:center}
.apertura-temporada__texto .lead{margin-bottom:var(--s-4)}
.apertura-temporada__texto p:last-child{margin:0}
.temporada{display:grid;gap:var(--s-4);list-style:none;margin:0;padding:0}
.temporada .poster{display:grid;gap:var(--s-3);align-content:start;padding:var(--s-6) var(--s-5);container-type:inline-size}
.poster__title{font-family:var(--f-display);font-size:min(var(--t-6),14cqi);font-stretch:96%;font-weight:850;line-height:.92;letter-spacing:-.03em;text-transform:uppercase;color:var(--c-paper);margin:0;text-wrap:balance}
.poster__title a{text-decoration:none;color:inherit}
.poster__title a:hover{text-decoration:underline;text-decoration-color:var(--c-accent);text-decoration-thickness:.06em;text-underline-offset:.1em}
.poster__who{font-family:var(--f-body);font-style:italic;font-size:var(--t-2);line-height:1.3;color:var(--c-secondary);margin:0}
.poster__menores{font-family:var(--f-display);font-stretch:86%;font-weight:700;font-size:var(--t-1);color:var(--c-paper);margin:0}
.poster .rule{margin:var(--s-2) 0}
.poster__nota{font-family:var(--f-display);font-stretch:88%;font-weight:600;font-size:var(--t-0);color:var(--c-secondary);margin:0}
.poster__cta{margin:var(--s-2) 0 0}
.poster__ganador{font-family:var(--f-display);font-weight:800;font-stretch:88%;font-size:var(--t-2);color:var(--c-paper);margin:0}

/* the steps of a sign-up, a sequence */
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);counter-reset:paso}
.pasos li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);align-items:start;border-top:1px solid var(--c-line);padding-top:var(--s-3)}
.pasos li::before{counter-increment:paso;content:counter(paso);font-family:var(--f-display);font-weight:800;font-stretch:80%;font-size:var(--t-2);line-height:1.1;color:var(--c-accent);min-width:1.2em}
.pasos div{min-width:0}
.pasos b{font-family:var(--f-display);font-weight:800;font-stretch:88%;font-size:var(--t-2);line-height:1.1;display:block;margin-bottom:var(--s-1)}
.pasos p{margin:0;color:var(--c-muted)}

/* the sign-up: the summary pinned beside the form */
.alta{display:grid;gap:var(--s-5)}
.resumen{background:var(--c-paper);border:1px solid var(--c-line);border-top:4px solid var(--c-accent);border-radius:var(--r-a);padding:var(--s-4) var(--s-5);display:grid;gap:var(--s-3);align-content:start}
.resumen .card__k{margin:0}
.resumen__dia{display:flex;gap:var(--s-3);align-items:center}
.resumen__dia b{display:block;font-family:var(--f-display);font-weight:800;font-stretch:88%;font-size:var(--t-2);line-height:1.1;letter-spacing:-.01em}
.resumen__dia span{display:block;font-family:var(--f-display);font-stretch:88%;font-size:var(--t-0);color:var(--c-muted);margin-top:.15em}
.dl--resumen{grid-template-columns:1fr}
.dl--resumen div{padding:var(--s-2) 0}
.dl--resumen dd{font-size:var(--t-1)}
.resumen__link{margin:0;font-family:var(--f-display);font-stretch:84%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-0)}
.resumen__link a{text-decoration:none;border-bottom:2px solid var(--c-accent);padding-bottom:.1em}
.apertura{display:grid;gap:var(--s-2);max-width:var(--measure);margin-bottom:var(--s-5)}
.apertura p{margin:0}
.apertura .card__k{margin:0}
.pide{margin-top:var(--s-6)}
.pide h3{margin-bottom:var(--s-3)}

/* the form: three steps, one at a time once the script runs; all at once without it */
.form{display:grid;gap:var(--s-5);max-width:var(--measure)}
.form fieldset{border:1px solid var(--c-line);border-top:4px solid var(--c-primary);border-radius:var(--r-a);padding:var(--s-3) var(--s-4) var(--s-5);margin:0;min-width:0;background:var(--c-paper)}
.form legend{font-family:var(--f-display);font-weight:800;font-stretch:86%;font-size:var(--t-2);letter-spacing:-.01em;padding:0 var(--s-2)}
.form__campos{display:grid;gap:var(--s-4);padding-top:var(--s-2)}
.form.is-live .paso:not(.is-current){display:none}
.no-js .progreso,.no-js .atras{display:none}
.progreso{display:grid;gap:var(--s-2);margin:0}
.progreso__texto{font-family:var(--f-display);font-stretch:84%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-0);color:var(--c-muted)}
.progreso__texto b{color:var(--c-ink)}
.progreso__barra{display:flex;gap:var(--s-1)}
.progreso__barra i{flex:1;height:5px;background:var(--c-line);border-radius:var(--r-a);transition:background var(--d-1) var(--ease)}
.progreso__barra i.is-done{background:var(--c-accent)}
.campo{display:grid;gap:var(--s-1)}
.campo label{font-family:var(--f-display);font-stretch:82%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-0);color:var(--c-muted)}
.campo input,.campo select{font:inherit;font-size:var(--t-1);line-height:1.3;padding:.6em .7em;border:2px solid var(--c-line);border-radius:var(--r-a);background:var(--c-paper);color:var(--c-ink);width:100%;min-width:0;transition:border-color var(--d-1) var(--ease)}
.campo select{padding-right:2em}
.campo input:focus-visible,.campo select:focus-visible{border-color:var(--c-primary)}
.campo small{font-size:var(--t-0);color:var(--c-muted);font-family:var(--f-display);font-stretch:88%}
.campo.is-invalid input,.campo.is-invalid select{border-color:var(--c-bad)}
.campo__error{margin:0;font-family:var(--f-display);font-stretch:88%;font-weight:700;font-size:var(--t-0);color:var(--c-bad)}
.campo__nota{margin:0;font-family:var(--f-display);font-stretch:88%;font-size:var(--t-0);color:var(--c-muted)}
.eco{font-family:var(--f-display);font-weight:800;font-stretch:88%;font-size:var(--t-3);letter-spacing:.06em;text-transform:uppercase;margin:var(--s-1) 0 0;color:var(--c-ink);overflow-wrap:anywhere}
.eco span{font-family:var(--f-body);font-weight:400;font-size:var(--t-0);letter-spacing:0;text-transform:none;color:var(--c-muted);display:block}
.marca{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);align-items:start;font-size:var(--t-1);cursor:pointer}
.marca input{width:1.25em;height:1.25em;margin:.2em 0 0;accent-color:var(--c-accent)}
.marca.is-invalid span{color:var(--c-bad)}
.marca .campo__error{grid-column:1 / -1}
.pago{margin:0;padding-top:var(--s-3);border-top:1px solid var(--c-line);font-family:var(--f-display);font-stretch:88%;font-weight:600;font-size:var(--t-1)}
.pago--total{padding-top:0;border-top:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-1) var(--s-3)}
.pago--total b{font-weight:800;color:var(--c-ink)}
.form__campos--dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-3)}
.progreso__barra i[hidden]{display:none}
.form__envio{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}
.form__envio p{flex-basis:100%;margin:0}
button.btn{cursor:pointer;appearance:none}
.btn[disabled]{cursor:not-allowed;background:var(--c-muted);border-color:var(--c-muted);color:var(--c-paper);transform:none}
.atras{appearance:none;background:none;border:0;border-bottom:2px solid var(--c-accent);padding:0 0 .1em;font:inherit;font-family:var(--f-display);font-stretch:84%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-0);color:var(--c-ink);cursor:pointer}
.atras:hover{color:var(--c-accent)}

/* the confirmation, in the form's place */
.hecho{background:var(--c-paper);border:1px solid var(--c-line);border-top:4px solid var(--c-ok);border-radius:var(--r-a);padding:var(--s-5);display:grid;gap:var(--s-4);max-width:var(--measure)}
.hecho .card__k{margin:0;color:var(--c-ok)}
.hecho h2{margin:0;font-size:var(--t-4)}
.hecho h3{margin:var(--s-2) 0 0}
.hecho>p{margin:0}
.hecho>div{display:grid;gap:var(--s-2)}

/* the fixtures: the groups, then the match list of the club's own pages */
.grupos{display:grid;gap:var(--s-4)}
.grupo h3{margin:0 0 var(--s-3)}
.equipos{margin:0;padding-left:1.2em;font-family:var(--f-display);font-stretch:88%;font-weight:600}
.equipos li{padding:.3em 0;border-top:1px solid var(--c-line)}
.clasif{width:100%;border-collapse:collapse;font-family:var(--f-display);font-stretch:84%}
.clasif th,.clasif td{padding:.45em .25em;text-align:right;border-top:1px solid var(--c-line);font-size:var(--t-0);font-variant-numeric:tabular-nums;vertical-align:top}
.clasif th{font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c-muted);border-top:0;border-bottom:2px solid var(--c-primary)}
.clasif td:first-child,.clasif th:first-child{text-align:left;font-size:var(--t-1);font-weight:700;font-stretch:88%;padding-left:0}
.clasif td.pts{font-weight:800;color:var(--c-accent)}
.horarios h3{margin:var(--s-5) 0 var(--s-3)}
.partidos{list-style:none;margin:0;padding:0;max-width:52rem}
.partidos li{display:grid;grid-template-columns:4.4rem minmax(0,1fr) auto;gap:var(--s-3);align-items:center;padding:var(--s-3) 0;border-top:1px solid var(--c-line)}
.hora b{display:block;font-family:var(--f-display);font-weight:800;font-stretch:80%;font-size:var(--t-2);line-height:1;letter-spacing:-.01em}
.hora small{display:block;font-family:var(--f-display);font-stretch:84%;font-size:var(--t-0);color:var(--c-muted);line-height:1.2;margin-top:.25em}
.cruce{display:grid;gap:.15em;font-family:var(--f-display);font-weight:700;font-stretch:88%;font-size:var(--t-1);line-height:1.15;min-width:0}
.cruce span{overflow-wrap:anywhere}
.marcador{display:grid;gap:.15em;text-align:right;font-family:var(--f-display);font-weight:800;font-stretch:80%;font-size:var(--t-1);line-height:1.15;min-width:2ch}
.marcador.is-pending{color:var(--c-muted);font-weight:500}

/* the day: the timeline of the club's history page, with the hour in place of the year */
.timeline--dia>li>b{font-size:var(--t-2)}
.timeline--dia div b{display:block;font-size:var(--t-2);color:var(--c-ink);font-stretch:88%;padding:0;margin-bottom:var(--s-1)}

@media (min-width:48em){
  .temporada{grid-template-columns:1fr 1fr}
  .pasos{grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
  .pasos li{border-top:2px solid var(--c-primary)}
  .pasos.pasos--lista{grid-template-columns:1fr;gap:var(--s-3)}
  .pasos.pasos--lista li{border-top:1px solid var(--c-line)}
  .ficha{grid-template-columns:1fr 1fr}
  .grupos{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
  .card .clubs{columns:2}
}
@media (min-width:60em){
  .momento{grid-template-columns:minmax(16rem,24rem) minmax(0,1fr);gap:var(--s-7)}
  .ficha{grid-template-columns:1fr 1fr}
  .caja{max-width:14rem}
  .temporada .poster{padding:var(--s-7) var(--s-6)}
  .apertura-temporada{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s-7)}
  .alta{grid-template-columns:minmax(0,1fr) 21rem;gap:var(--s-7);align-items:start}
  .alta__form{order:1}
  .resumen{order:2;position:sticky;top:calc(var(--s-8) + var(--s-6))}
}