/* Inicio and El Festival components (build_pages_s74.py) */
/* forms in her colours */
.mk-form{display:grid;grid-template-columns:minmax(0,440px);gap:16px;align-items:start}
.mk-form input,.mk-form button,.mk-reg input,.mk-reg button{-webkit-appearance:none;appearance:none}
.mk-form label{display:grid;gap:6px}.mk-form label span{font-size:15px;font-weight:600}
.mk-form input,.mk-reg input:not([type=radio]){font:inherit;font-size:17px;font-weight:400;color:#942E66;background:#E8EDCA;border:2px solid #E8EDCA;
  border-radius:14px;padding:12px 14px;min-height:50px;width:100%}
.mk-form input:focus-visible,.mk-reg input:focus-visible{outline:3px solid #F66428;outline-offset:2px}
.mk-form .b-btn{min-height:50px;justify-content:center;justify-self:start}
.mk-form input::placeholder{color:#942E66;opacity:.55}
.mk-form .mk-ok-box{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.mk-form .mk-ok-box input{appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;min-height:0;padding:0;margin:1px 0 0;border-radius:7px;border:2px solid #E8EDCA;background:transparent;cursor:pointer;display:grid;place-items:center}
.mk-form .mk-ok-box input:checked{background:#E8EDCA}
.mk-form .mk-ok-box input:checked::after{content:"";width:12px;height:7px;border-left:3px solid #942E66;border-bottom:3px solid #942E66;transform:translateY(-2px) rotate(-45deg)}
.mk-form .mk-ok-box span{font-size:16px;font-weight:400;line-height:1.45}
.mk-done{grid-column:1/-1;margin:4px 0 0;font-size:17px;font-weight:600}
.mk-hint{margin:0;font-size:16px;line-height:1.5}
.mk-hint .mk-hint-yes{font:inherit;font-weight:700;color:#942E66;background:#E8EDCA;border:0;border-radius:999px;padding:2px 12px;margin:0 2px;cursor:pointer}
.mk-err{margin:0;font-size:16px;font-weight:600;color:#942E66}
.mk-err a{color:inherit}
@media (max-width:759px){.mk-form{grid-template-columns:1fr}.mk-form .b-btn{justify-self:stretch}}
/* Inicio: the hero button, and the Avísame band in place of the second ticket */
.mk-hero-acts{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.mk-hero-acts{margin-top:clamp(24px,2.6vw,36px)}
/* the poster as tall as the hero text (operator: resize it, it cannot be cropped) */
.sB .hero-cartel .b-poster{max-width:420px}
.sB .mk-band{background:#942E66;color:#E8EDCA;padding:clamp(56px,7vw,96px) 0}
.mk-band-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.mk-band .b-det{color:#E8EDCA;margin:0 0 10px}.mk-band h2{margin:0 0 6px;color:#E8EDCA}
.mk-band .mk-when{margin:0 0 14px;font-size:clamp(20px,2vw,26px);font-weight:700}
.mk-band .mk-txt{margin:0 0 6px;font-size:18px;line-height:1.45}
.mk-band .b-btn.line{color:#E8EDCA;margin-top:16px}
@media (max-width:899px){.mk-band-in{grid-template-columns:1fr}}
/* registration dialog */
.mk-reg{border:0;border-radius:24px;padding:0;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);background:#E8EDCA;color:#942E66}
.mk-reg::backdrop{background:rgba(21,20,19,.55)}
.mk-reg-in{display:grid;gap:18px;padding:30px clamp(20px,4vw,36px) 32px;position:relative}
.mk-reg .b-det{margin:0;color:#942E66}.mk-reg h2{margin:0;color:#942E66;font-size:clamp(30px,4vw,40px)}
.mk-x{position:absolute;right:14px;top:12px;width:44px;height:44px;border-radius:50%;border:2px solid #942E66;background:none;color:#942E66;font-size:26px;line-height:1;cursor:pointer}
.mk-field{display:grid;gap:8px}.mk-field span,.mk-reg legend{font-size:16px;font-weight:600;padding:0}
.mk-reg input:not([type=radio]){background:#fff;border-color:#942E66}
.mk-reg fieldset{border:0;margin:0;padding:0;display:grid;gap:10px}
.mk-reg select{-webkit-appearance:none;appearance:none;font:inherit;font-size:17px;font-weight:400;color:#942E66;width:100%;min-height:50px;
  padding:12px 44px 12px 14px;border:2px solid #942E66;border-radius:14px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23942E66' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px}
.mk-reg select:invalid{color:rgba(148,46,102,.6)}
.mk-reg select:focus-visible{outline:3px solid #F66428;outline-offset:2px}
.mk-send{justify-self:start}.mk-ok{display:grid;gap:14px}.mk-reg [hidden],.mk-form [hidden]{display:none!important}
.mk-reg-in>.b-det{padding-right:52px}.mk-ok p{margin:0;font-size:17px;line-height:1.5}
/* El Festival below the hero (session 74, round 6). Cards: the Vivero Boutique card (a drawing on a coloured tile,
   then the title and the text), here five in a row on plum; materials: her poster, cream pots on orange tiles */
.mk-expl{display:grid;gap:var(--r-head,40px)}
.sB .mk-expl .b-lead{margin:0;max-width:40em;font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:#942E66}
.mk-expl .b-det{margin:0 0 16px}
.mk-mats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--r-grid,24px)}
.mk-mats li{display:grid;gap:10px;align-content:start}
.mk-mat-art{display:grid;place-items:center;aspect-ratio:1/1;border-radius:20px;background:#F66428}
.sB .mk-mats .ic{width:46%;height:46%!important;max-width:none;max-height:none;aspect-ratio:auto!important;color:#E8EDCA;transform:none}
.mk-mats li>span:last-child{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;color:#942E66}
@media (max-width:759px){.mk-mats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:599px){.mk-mats li>span:last-child{font-size:13px}}
@media (min-width:900px){.sB .b-five.mk-cards{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
.mk-card{margin:0;display:grid;align-content:start;min-width:0}
.mk-card-art{position:relative;aspect-ratio:1/1;border-radius:20px;background:#942E66}
.mk-card-art img{position:absolute;inset:14%;width:72%;height:72%;object-fit:contain;display:block}
.mk-card figcaption{padding-top:16px}
.mk-card h3{margin:0;color:#942E66;text-transform:uppercase}
.mk-card p{margin:6px 0 0;font-size:17px;line-height:1.5;color:#942E66}
@media (max-width:899px) and (min-width:760px){.sB .b-five.mk-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
/* phones (round 7, operator: no sideways row): the five stacked, each a row with its tile on the left */
@media (max-width:759px){.sB .b-five.mk-cards{grid-template-columns:minmax(0,1fr)!important;row-gap:20px!important}
  .mk-card{grid-template-columns:104px minmax(0,1fr);column-gap:16px;align-items:start}.mk-card-art{border-radius:16px}
  .mk-card figcaption{padding-top:0}.mk-card p{font-size:16px}}
/* El Festival: intro with a photo; feature cards in a row on phones; the mosaic; the still list */
.mk-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:stretch}
.mk-intro img{width:100%;height:0;min-height:100%;object-fit:cover;object-position:50% 40%;border-radius:20px;display:block}
@media (max-width:899px){.mk-intro{grid-template-columns:1fr}.mk-intro img{height:auto;min-height:0;aspect-ratio:4/5}}
@media (max-width:759px){.sB .mk-row-phone{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;
  margin-inline:calc(-1 * var(--brand-gutter,16px));padding:0 var(--brand-gutter,16px) 8px}.mk-row-phone>*{scroll-snap-align:start}}
/* the gallery on her green (session 74 colours): a plum section would run into the plum Avísame band */
.sB [data-ns-id="festival.gallery"]{background:#099345!important;color:#E8EDCA}
.sB [data-ns-id="festival.gallery"] .b-sechead p{font-size:24px;font-weight:400}
.sB [data-ns-id="festival.gallery"] .b-det{color:#E8EDCA;font-size:19px}
.mk-mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(150px,17vw,250px);gap:12px;margin-top:28px}
.mk-mosaic button{all:unset;cursor:zoom-in;border-radius:16px;overflow:hidden;display:block}
.mk-mosaic button:focus-visible{outline:3px solid #F66428;outline-offset:3px}
.mk-mosaic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.mk-mosaic button:hover img{transform:scale(1.03)}
.mk-mosaic .big{grid-column:span 2;grid-row:span 2}.mk-mosaic .wide{grid-column:span 2}
@media (max-width:759px){.mk-mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:8px;grid-auto-flow:dense}.mk-mosaic .big{grid-column:span 2;grid-row:span 1}}
.mk-lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100dvh}
.mk-lb::backdrop{background:rgba(21,20,19,.9)}
.mk-lb-in{position:absolute;inset:0;display:grid;place-items:center;padding:56px 12px}
/* the big photo fits the screen, with room for the arrows (operator, round 5) */
.mk-lb img{max-width:min(1400px,calc(100vw - 140px));max-height:calc(100dvh - 112px);width:auto;height:auto;object-fit:contain;border-radius:12px;display:block}
@media (max-width:759px){.mk-lb img{max-width:calc(100vw - 24px)}}
.mk-lb button{position:absolute;width:48px;height:48px;border-radius:50%;border:2px solid #E8EDCA;background:rgba(21,20,19,.4);color:#E8EDCA;font-size:24px;cursor:pointer}
.mk-lb .x{right:14px;top:12px}.mk-lb .p{left:14px;top:50%}.mk-lb .n{right:14px;top:50%}
.mk-who{margin:32px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 0}
.mk-who li{font-size:clamp(19px,1.5vw,20px);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.mk-who li:not(:last-child)::after{content:"·";margin:0 .6em;opacity:.6}
/* session 74: the ticket (operator: each fact once, five pieces and one button; a serial number for fun), look 2
   (verde, operator's choice of three). Notched corners and notches at the tear line come from a mask. All text on
   her green is cream (operator, round 7), so none is smaller than 19 px bold (her portal's contrast rule: cream on
   green only at 24 px, or 18.7 px bold). */
.tk3{--line:transparent;--paper:#099345;--ink:#E8EDCA;--stub:#942E66;--stub-ink:#E8EDCA;--btn:#E8EDCA;--btn-ink:#942E66;
  max-width:780px;margin:0 auto;padding:2px;background:var(--line);-webkit-mask:radial-gradient(circle at 0 0,#0000 14px,#000 14.5px),radial-gradient(circle at 100% 0,#0000 14px,#000 14.5px),radial-gradient(circle at 0 100%,#0000 14px,#000 14.5px),radial-gradient(circle at 100% 100%,#0000 14px,#000 14.5px),radial-gradient(circle at calc(100% - 150px) 0,#0000 14px,#000 14.5px),radial-gradient(circle at calc(100% - 150px) 100%,#0000 14px,#000 14.5px);-webkit-mask-composite:source-in;mask:radial-gradient(circle at 0 0,#0000 14px,#000 14.5px),radial-gradient(circle at 100% 0,#0000 14px,#000 14.5px),radial-gradient(circle at 0 100%,#0000 14px,#000 14.5px),radial-gradient(circle at 100% 100%,#0000 14px,#000 14.5px),radial-gradient(circle at calc(100% - 150px) 0,#0000 14px,#000 14.5px),radial-gradient(circle at calc(100% - 150px) 100%,#0000 14px,#000 14.5px);mask-composite:intersect}
.tk3-paper{display:grid;grid-template-columns:minmax(0,1fr) 148px;background:var(--paper);color:var(--ink);-webkit-mask:radial-gradient(circle at 0 0,#0000 16px,#000 16.5px),radial-gradient(circle at 100% 0,#0000 16px,#000 16.5px),radial-gradient(circle at 0 100%,#0000 16px,#000 16.5px),radial-gradient(circle at 100% 100%,#0000 16px,#000 16.5px),radial-gradient(circle at calc(100% - 148px) 0,#0000 16px,#000 16.5px),radial-gradient(circle at calc(100% - 148px) 100%,#0000 16px,#000 16.5px);-webkit-mask-composite:source-in;mask:radial-gradient(circle at 0 0,#0000 16px,#000 16.5px),radial-gradient(circle at 100% 0,#0000 16px,#000 16.5px),radial-gradient(circle at 0 100%,#0000 16px,#000 16.5px),radial-gradient(circle at 100% 100%,#0000 16px,#000 16.5px),radial-gradient(circle at calc(100% - 148px) 0,#0000 16px,#000 16.5px),radial-gradient(circle at calc(100% - 148px) 100%,#0000 16px,#000 16.5px);mask-composite:intersect}
.tk3-main{padding:clamp(24px,3vw,36px) clamp(22px,3vw,40px);display:grid;gap:14px;justify-items:start;min-width:0}
.tk3-top{margin:0;width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;padding-bottom:14px;
  border-bottom:3px dotted currentColor;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.tk3-days{font-size:clamp(19px,1.9vw,23px)}
.tk3-no{font-size:19px;font-variant-numeric:tabular-nums;letter-spacing:.16em}
.tk3-title{margin:4px 0 0;display:grid;gap:4px;justify-items:start}
.tk3-title .lg{height:clamp(16px,1.6vw,22px);max-width:100%}
.tk3-pre{font-size:19px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.tk3-name{font-size:clamp(46px,6.2vw,80px);font-weight:900;line-height:.86;text-transform:uppercase;letter-spacing:-.015em}
.tk3-place{margin:0;font-size:19px;font-weight:700}.tk3-place i{font-style:normal;white-space:nowrap}
.sB .tk3 .b-btn{background:var(--btn)!important;color:var(--btn-ink)!important;border-color:var(--btn)!important;margin-top:4px}
.tk3-stub{background:var(--stub);color:var(--stub-ink);border-left:3px dotted var(--ink);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:24px 0;text-align:center}
.tk3-adm{margin:0;writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(26px,2.6vw,32px);font-weight:900;letter-spacing:.08em;text-transform:uppercase;line-height:1;white-space:nowrap}
.tk3-no2{margin:0;font-size:13px;font-weight:800;letter-spacing:.12em;font-variant-numeric:tabular-nums}
html.mk-after .tk3 .b-btn{display:none}
html.mk-after .tk3-adm{font-size:0}html.mk-after .tk3-adm::after{content:"Gracias por venir";font-size:clamp(20px,2vw,24px)}
@media (max-width:639px){
  .tk3{-webkit-mask:radial-gradient(circle at 0 0,#0000 14px,#000 14.5px),radial-gradient(circle at 100% 0,#0000 14px,#000 14.5px),radial-gradient(circle at 0 100%,#0000 14px,#000 14.5px),radial-gradient(circle at 100% 100%,#0000 14px,#000 14.5px),radial-gradient(circle at 0 calc(100% - 74px),#0000 14px,#000 14.5px),radial-gradient(circle at 100% calc(100% - 74px),#0000 14px,#000 14.5px);-webkit-mask-composite:source-in;mask:radial-gradient(circle at 0 0,#0000 14px,#000 14.5px),radial-gradient(circle at 100% 0,#0000 14px,#000 14.5px),radial-gradient(circle at 0 100%,#0000 14px,#000 14.5px),radial-gradient(circle at 100% 100%,#0000 14px,#000 14.5px),radial-gradient(circle at 0 calc(100% - 74px),#0000 14px,#000 14.5px),radial-gradient(circle at 100% calc(100% - 74px),#0000 14px,#000 14.5px);mask-composite:intersect}
  .tk3-paper{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 72px;-webkit-mask:radial-gradient(circle at 0 0,#0000 16px,#000 16.5px),radial-gradient(circle at 100% 0,#0000 16px,#000 16.5px),radial-gradient(circle at 0 100%,#0000 16px,#000 16.5px),radial-gradient(circle at 100% 100%,#0000 16px,#000 16.5px),radial-gradient(circle at 0 calc(100% - 72px),#0000 16px,#000 16.5px),radial-gradient(circle at 100% calc(100% - 72px),#0000 16px,#000 16.5px);-webkit-mask-composite:source-in;mask:radial-gradient(circle at 0 0,#0000 16px,#000 16.5px),radial-gradient(circle at 100% 0,#0000 16px,#000 16.5px),radial-gradient(circle at 0 100%,#0000 16px,#000 16.5px),radial-gradient(circle at 100% 100%,#0000 16px,#000 16.5px),radial-gradient(circle at 0 calc(100% - 72px),#0000 16px,#000 16.5px),radial-gradient(circle at 100% calc(100% - 72px),#0000 16px,#000 16.5px);mask-composite:intersect}
  .tk3-stub{border-left:0;border-top:3px dotted var(--ink);flex-direction:row;justify-content:space-between;padding:0 22px}
  .tk3-adm{writing-mode:horizontal-tb;transform:none;font-size:24px}
  html.mk-after .tk3-adm::after{font-size:20px}
}