:root {
  --web-font-title: "Montserrat", "Segoe UI", Arial, sans-serif;
  --web-font-body:  "Open Sans", "Segoe UI", Arial, sans-serif;
  --web-font-mono:  "Source Code Pro", Consolas, monospace;

  --web-max-w:         1080px;
  --web-section-max-w: 1700px;
  --web-space:       24px;
  --web-space-lg:    64px;
  --web-radius:      8px;
  --web-radius-sm:   5px;
  --web-radius-pill: 999px;
  --web-ribbon-h:    6px;
  --web-control-h:   30px;
  --web-nav-w:      120px;   

  --web-header-h:    54px;

  --web-chip-gap:    8px;
  --web-chip-u:     64px;
  --web-chip-2u:    calc(var(--web-chip-u) * 2 + var(--web-chip-gap));
  --web-chip-3u:    calc(var(--web-chip-u) * 3 + var(--web-chip-gap) * 2);
  --web-card-title-h: 84px;   
  --web-card-stats-h: 56px;   
  --web-card-media-h: 150px;
  --web-card-price-h: 205px;  

  --web-kicker-h:    50px;    
  --web-indent:      30px;    
  --web-line-term-w: 30%;     
  --web-price-col-w: 320px;
  --web-media-btn:   48px;    
  --web-tab-h:       var(--web-kicker-h);    
  --web-strip-sel-w: 190px;
  --web-icon-22:     22px;
  --web-header-z:    10;
  --web-menu-z:      5;      
  --web-dur:         160ms;   

  --web-track-brand: 0.25em;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

main[id],
.web-section { scroll-margin-top: calc(var(--web-header-h) + 8px); }

body {
  font-family: var(--web-font-body);
  font-weight: 700;
  background:  var(--pageBackground);
  color:       var(--surfaceText);
  line-height: 1.6;
}

html[data-boot] body { visibility: hidden; }

img { max-width: 100%; height: auto; }

a { color: var(--basicNavy); }

a:focus-visible,
.web-lang:focus-visible {
  outline:        3px solid var(--basicNavy);
  outline-offset: 2px;
}

.web-nav a::before,
.web-kicker::before,
.web-view-ico,
.web-line-ico,
.web-price-per::after,
.web-section-tab-ico {
  background-color:      currentColor;
  -webkit-mask-image:    var(--web-icon);
  -webkit-mask-repeat:   no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size:     contain;
  mask-image:            var(--web-icon);
  mask-repeat:           no-repeat;
  mask-position:         center;
  mask-size:             contain;
}

.web-nav a::before,
.web-kicker::before { content: ""; width: var(--web-icon-22); height: var(--web-icon-22); }

.web-ribbon { display: flex; height: var(--web-ribbon-h); }
.web-ribbon span { flex: 1; }
.web-ribbon .web-ribbon-up    { background: var(--basicTurquoise); }
.web-ribbon .web-ribbon-left  { background: var(--basicCoral); }
.web-ribbon .web-ribbon-right { background: var(--basicGold); }
.web-ribbon .web-ribbon-down  { background: var(--basicNavy); }

.web-header {
  position:      sticky;
  top:           0;
  background:    var(--fluorGrey1);
  transition:    background var(--web-dur) ease;
  z-index:       var(--web-header-z);
}

.web-header[data-scrolled] { background: var(--fluorGrey2); }

.web-header-inner {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  align-items:           center;
  gap:                   var(--web-space);
  margin:                0 auto;
  padding:               10px var(--web-space);
}

.web-header-logo { justify-self: start; }
.web-nav         { justify-self: center; }
.web-lang        { justify-self: end; }

.web-header-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.web-header-logo img { width: 34px; }

.web-header-logo strong {
  font-size:      1.05rem;
  letter-spacing: 0.12em;
}

.web-nav {
  display:               grid;
  grid-template-columns: repeat(4, auto);
  gap:                   4px;
  justify-content:       center;
}

.web-nav a {
  display:         inline-flex;
  align-items:     center;
  justify-content: flex-start;
  gap:             6px;
  padding-left:    10px;
  width:           var(--web-nav-w);
  height:          var(--web-control-h);
  border-radius:   var(--web-radius-sm);
  font-family:     var(--web-font-title);
  font-weight:     700;
  font-size:       0.85rem;
  white-space:     nowrap;
  text-decoration: none;
}

.web-nav a:hover { background: var(--basicGrey5); }

.web-nav-que-es   { color: var(--shadowTurquoise); }
.web-nav-metodo   { color: var(--shadowCoral); }
.web-nav-aula     { color: var(--shadowGold); }
.web-nav-contacto { color: var(--shadowNavy); }

.web-nav-que-es:hover   { color: var(--softTurquoise); }
.web-nav-metodo:hover   { color: var(--softCoral); }
.web-nav-aula:hover     { color: var(--softGold); }
.web-nav-contacto:hover { color: var(--softNavy); }

.web-nav-que-es,   .web-kicker-que-es   { --web-icon: var(--web-icon-que-es); }
.web-nav-metodo,   .web-kicker-metodo   { --web-icon: var(--web-icon-metodo); }
.web-nav-aula,     .web-kicker-aula     { --web-icon: var(--web-icon-aula); }
.web-nav-contacto, .web-kicker-contacto { --web-icon: var(--web-icon-contacto); }

.web-lang {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           var(--web-control-h);
  height:          var(--web-control-h);
  border:          0;
  border-radius:   var(--web-radius-sm);
  font-family:     var(--web-font-mono);
  font-weight:     900;
  font-size:       0.8rem;
  letter-spacing:  0.08em;
  text-decoration: none;
  cursor:          pointer;
}

.web-lang-es { background: var(--fluorCoral); color: var(--fluorGrey1); }
.web-lang-en { background: var(--fluorNavy);  color: var(--fluorGrey1); }

.web-lang-es:hover { background: var(--fluorGrey1); color: var(--fluorCoral); box-shadow: inset 0 0 0 2px var(--fluorCoral); }
.web-lang-en:hover { background: var(--fluorGrey1); color: var(--fluorNavy);  box-shadow: inset 0 0 0 2px var(--fluorNavy); }

.web-hero { 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
    padding: clamp(72px, 18vh, 220px) var(--web-space);
}
.web-hero img { width: min(360px, 70vw); }

.web-hero h1 {
  font-family:    var(--web-font-title);
  font-weight:    900;
  font-size:      clamp(3.2rem, 8vw, 4.8rem);
  letter-spacing: var(--web-track-brand);
  text-indent:    var(--web-track-brand);
  line-height:    1.15;
  color:          var(--shadowNavy);
  max-width:      960px;
  margin:         var(--web-space) auto 12px;
-webkit-text-stroke: 3px var(--shadowNavy);
  paint-order: stroke fill;
}

  
.web-hero p { max-width: 640px; margin: 0 auto 8px; font-size: 1.05rem; color:       var(--shadowNavy);}

.web-hero p:empty { display: none; }

.web-video {
  margin-top:     var(--web-space);
  padding-inline: var(--web-indent);
}

.web-video media-controller {
  --media-primary-color:            var(--fluorGrey1);
  --media-secondary-color:          var(--shadowNavy);
  --media-control-background:       var(--shadowNavy);
  --media-control-hover-background: var(--basicNavy);
  --media-range-thumb-background:   var(--fluorGrey1);
  --media-range-track-background:   var(--secondaryGrey2);
  --media-background-color:         transparent;

  display:       block;
  width:         100%;
  aspect-ratio:  16 / 9;
  border-radius: var(--web-radius);
  overflow:      hidden;
}

.web-video video {
  width:      100%;
  height:     100%;
  object-fit: contain;
  border-radius: var(--web-radius);
}

.web-video media-control-bar {
  --media-button-icon-width:  24px;
  --media-button-icon-height: 24px;
}

.web-video media-control-bar > :is(media-play-button, media-mute-button, media-fullscreen-button) {
  width:   var(--web-media-btn);
  height:  var(--web-media-btn);
  padding: 0;
}

.web-video media-time-display { padding-inline: 14px; }

.web-video media-time-range   { --media-range-bar-color: var(--fluorTurquoise); }
.web-video media-volume-range { --media-range-bar-color: var(--fluorCoral); }

.web-section { padding: var(--web-space) var(--web-space) var(--web-space-lg) var(--web-space); }
.web-section-inner { max-width: var(--web-section-max-w); margin: 0 auto; }

.web-kicker {
  border:          0;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  width:           240px;
  height:          var(--web-kicker-h);
  border-radius:   var(--web-radius-sm);
  color:          var(--fluorGrey1);
  font-family:    var(--web-font-mono);
  font-weight:    700;
  font-size:      1.05rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.web-kicker-que-es   { background: var(--shadowTurquoise); }
.web-kicker-metodo   { background: var(--shadowCoral); }
.web-kicker-aula     { background: var(--shadowGold); }
.web-kicker-contacto { background: var(--shadowNavy); }

button.web-kicker               { cursor: pointer; }
button.web-kicker:hover         { filter: brightness(1.2); }
button.web-kicker:focus-visible,
.web-view-toggle:focus-visible  { outline: 2px solid currentColor; outline-offset: 3px; }

button.web-kicker::after {
  content:      "";
  width:        0;
  height:       0;
  border-left:  5px solid transparent;
  border-right: 5px solid transparent;
  border-top:   6px solid currentColor;
  transition:   transform var(--web-dur) ease;
}

button.web-kicker[aria-expanded="false"]::after { transform: rotate(-90deg); }

@media (prefers-reduced-motion: reduce) {
  button.web-kicker::after   { transition: none; }
  .web-price-sel-btn,
  .web-price-sel-btn::after  { transition: none; }
  .web-section-tab,
  .web-section-tab::after    { transition: none; }
}

.web-section-body[hidden] { display: none; }

.web-avatarblock {
  flex:          none;
  width:         var(--web-kicker-h);
  height:        var(--web-kicker-h);
  border-radius: 50%;
  object-fit:    cover;
}

.web-section-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }

.web-section h2 {
  font-family: var(--web-font-title);
  font-weight: 900;
  font-size:   clamp(1.4rem, 3vw, 1.9rem);
  color:       var(--web-section-accent, var(--basicGrey5));
  margin:      0;
}

#que-es   { --web-section-accent: var(--shadowTurquoise); }
#metodo   { --web-section-accent: var(--shadowCoral); }
#aula     { --web-section-accent: var(--shadowGold); }
#contacto { --web-section-accent: var(--shadowNavy); }

.web-section-tab {
  --web-tab-gap: 6px;

  position:        fixed;
  left:            0;
  top:             calc(var(--web-header-h) + var(--web-space) + var(--web-tab-slot, 0) * (var(--web-tab-h) + var(--web-tab-gap)));
  z-index:         var(--web-menu-z);
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           var(--web-tab-h);
  height:          var(--web-tab-h);
  border-radius:   0 var(--web-radius) var(--web-radius) 0;
  background:      var(--web-section-accent, var(--basicGrey5));
  color:           var(--fluorGrey1);
  box-shadow:      var(--shadow-card);
  transform:       translateX(-100%);
  opacity:         0;
  visibility:      hidden;
  transition:      transform var(--web-dur), opacity var(--web-dur), top var(--web-dur), visibility 0s var(--web-dur);
}

.web-section-tab-on {
  transform:  none;
  opacity:    1;
  visibility: visible;
  transition: transform var(--web-dur), opacity var(--web-dur), top var(--web-dur), visibility 0s;
}

.web-section-tab:hover         { filter: brightness(1.2); }
.web-section-tab:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.web-section-tab::after {
  content:        attr(data-tip);
  position:       absolute;
  left:           calc(100% + 8px);
  top:            50%;
  transform:      translate(-6px, -50%);
  padding:        6px 12px;
  border-radius:  var(--web-radius-sm);
  background:     var(--web-section-accent, var(--basicGrey5));
  color:          var(--fluorGrey1);
  font-family:    var(--web-font-mono);
  font-weight:    700;
  font-size:      0.78rem;
  white-space:    nowrap;
  box-shadow:     var(--shadow-card);
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--web-dur), transform var(--web-dur);
}

.web-section-tab:hover::after,
.web-section-tab:focus-visible::after {
  opacity:   1;
  transform: translate(0, -50%);
}

.web-section-tab-ico {
  width:  var(--web-icon-22);
  height: var(--web-icon-22);
}

.web-view-toggle {
  flex:            none;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           var(--web-kicker-h);
  height:          var(--web-kicker-h);
  border:          2px solid currentColor;
  border-radius:   var(--web-radius-sm);
  background:      transparent;
  color:           var(--web-section-accent, var(--basicGrey5));
  cursor:          pointer;
  transition:      background var(--web-dur) ease, color var(--web-dur) ease;
}

.web-view-toggle:hover               { background-color: currentColor; }
.web-view-toggle:hover .web-view-ico { background-color: var(--fluorGrey1); }

@media (prefers-reduced-motion: reduce) {
  .web-view-toggle { transition: none; }
}

.web-view-opt {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
}

.web-view-opt[hidden]    { display: none; }
.web-view-toggle[hidden] { display: none; }

.web-view-ico { width: 24px; height: 24px; }

.web-view-opt[data-view="card"]   .web-view-ico { --web-icon: url("../assets/img/view-agenda.svg"); }
.web-view-opt[data-view="mosaic"] .web-view-ico { --web-icon: url("../assets/img/view-grid.svg"); }

.web-view-label { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.web-intro { padding-inline: var(--web-indent); }

.web-section p { text-align: justify; hyphens: auto; }

.web-grid {
  display:        grid;
  gap:            12px;
  margin-top:     var(--web-space);
  padding-inline: var(--web-indent);
}

.web-grid[hidden] { display: none; }

.web-grid-mosaic {
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

.web-mosaic-card {
  --web-card-bg:   var(--basicNavy);
  --web-card-fg:   var(--fluorGrey1);
  --web-card-soft: var(--softNavy);
  --web-card-soft-fg: var(--shadowNavy);
  --web-card-text-min: 0px;

  display:        flex;
  flex-direction: column;
  background:     var(--fluorGrey1);
  border:         2px solid var(--web-card-bg);
  border-radius:  var(--web-radius);
  box-shadow:     var(--shadow-card);
  overflow:       hidden;

  min-height: calc(var(--web-card-title-h) + var(--web-card-media-h)
                 + var(--web-card-stats-h) + var(--web-card-price-h));
}

.web-mosaic-card .web-card-head { flex: 1 1 auto; min-height: 0; }

.web-mosaic-card .web-card-price-compact { flex: 0 0 auto; }

.web-mosaic-card .web-card-title {
  flex:       0 0 auto;
  min-height: var(--web-card-title-h);
  font-size:  max(0.95rem, var(--web-card-text-min));
}

.web-mosaic-card .web-card-stats strong { font-size: 1.4rem; }

.web-mosaic-card .web-line-target-claim { display: block; }

.web-mosaic-card .web-line-target-text {
  --web-target-lines: 3;
  --web-target-lh:    1.35;

  display:            -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--web-target-lines);
          line-clamp: var(--web-target-lines);
  overflow:           hidden;
  line-height:        var(--web-target-lh);
  min-height:         calc(var(--web-target-lines) * var(--web-target-lh) * 1em);
}

.web-card-price-compact {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-end;
  justify-content: center;
  gap:             8px;
  padding:         14px 14px;
  min-height:      var(--web-card-price-h);
  background:      var(--fluorGrey1);
  font-family:     var(--web-font-title);
  white-space:     nowrap;
}

.web-card-price-compact .web-price-now { font-size: 1.5rem; }

.web-card-price-compact .web-line-target {
  flex-direction: column;
  align-items:    flex-end;
  gap:            12px;
  white-space:    normal;
  padding-inline: 16px;
}

.web-card-price-compact .web-line-target-claim {
  align-self: stretch;
  text-align: left;
  font-size:  0.85rem;
}

.web-card-price-compact .web-price-total { margin-top: 2px;   margin-inline: 0px;}

.web-card-price-compact .web-line-target-price {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-auto-rows:        minmax(var(--web-control-h), auto);
  justify-items:         end;
  align-items:           center;
  row-gap:               8px;
  align-self:            stretch;
}

.web-card-price-compact .web-price-label { justify-self: start; }

.web-card-price-compact .web-price-sel     { grid-column: 1 / -1; justify-self: stretch; }
.web-card-price-compact .web-price-sel-btn {
  width:           100%;
  max-width:       none;
  justify-content: space-between;
  padding-inline:  12px 10px;
}

.web-card-price-compact .web-price-sel-menu {
  top:    auto;
  bottom: calc(100% + 6px);
}

.web-card {
  --web-card-bg:   var(--basicNavy);
  --web-card-fg:   var(--fluorGrey1);
  --web-card-soft: var(--softNavy);
  --web-card-soft-fg: var(--shadowNavy);

  --web-card-text-min: 0px;

  display:               grid;
  grid-template-columns: 240px 1fr;
  align-items:           stretch;
  background:            var(--fluorGrey1);
  --web-card-border:     2px;    
  border:                var(--web-card-border) solid var(--web-card-bg);
  border-radius:         var(--web-radius);
  box-shadow:            var(--shadow-card);
  overflow:              hidden;
}

.web-card-head {
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  background:      var(--web-card-bg);
  color:           var(--web-card-fg);
}

.web-card-title {
  flex:           0 0 var(--web-card-title-h);
  display:        flex;
  align-items:    center;
  font-family:    var(--web-font-mono);
  font-weight:    800;
  font-size:      max(1.1rem, var(--web-card-text-min));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          inherit;
  padding:        14px 18px;
}

#que-es   :is(.web-card, .web-mosaic-card) { --web-card-bg: var(--basicTurquoise); --web-card-fg: var(--fluorGrey4); --web-card-soft: var(--softTurquoise); }
#metodo   :is(.web-card, .web-mosaic-card) { --web-card-bg: var(--basicCoral);     --web-card-fg: var(--fluorGrey1); --web-card-soft: var(--softCoral); }
#aula     :is(.web-card, .web-mosaic-card) { --web-card-bg: var(--basicGold);      --web-card-fg: var(--fluorGrey4); --web-card-soft: var(--softGold); }
#contacto :is(.web-card, .web-mosaic-card) { --web-card-bg: var(--basicNavy);      --web-card-fg: var(--fluorGrey1); --web-card-soft: var(--softNavy); }

.web-card-media {
  position:     relative;
  flex:         1 1 auto;
  min-height:   0;
  aspect-ratio: 16 / 9;
}

.web-card-tag {
  position:       absolute;
  top:            0;
  right:          0;
  padding:        4px 10px;
  font-family:    var(--web-font-mono);
  font-weight:    800;
  font-size:      0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background:     color-mix(in srgb, var(--web-card-fg) 90%, transparent);
  color:          var(--web-card-bg);
  border-bottom-left-radius: var(--web-radius-sm);
}

.web-card-img {
  display:    block;
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.web-card-stats {
  flex:        0 0 var(--web-card-stats-h);
  position:    relative;
  display:     flex;
  justify-content: space-around;
  align-items: center;
  gap:         18px;
  list-style:  none;
  padding:     14px 18px;
}

.web-card-stats::before {
  content:             "";
  position:            absolute;
  inset:               0;
  background-image:    var(--web-card-img);
  background-size:     cover;
  background-position: center;
  opacity:             0.1;
  pointer-events:      none;
}

.web-card-stats li {
  position:    relative;
  display:     flex;
  align-items: baseline;
  gap:         4px;
}

.web-card-stats strong {
  font-family: var(--web-font-mono);
  font-weight: 800;
  font-size:   1.7rem;
  line-height: 1;
}

.web-card-stats span {
  font-size:   max(0.85rem, var(--web-card-text-min));
  font-weight: 700;
}

.web-card-text {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            14px;
  padding:        14px 22px 14px 18px;
  font-size:      1rem;
}

.web-card-text-body {
  display: flex;
  gap:     18px;
}

.web-card-text-content {
  color:           var(--shadowNavy);
  flex:            1 1 auto;
  min-width:       0;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             10px;
}

.web-line-target {
  display:         flex;
  align-self:      stretch;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  padding:         10px 10px 10px 28px;
  border-radius:   var(--web-radius-sm);
  background:      var(--web-card-soft);
  color:           var(--web-card-soft-fg);
  font-family:     var(--web-font-title);
}

.web-line-target-claim {
  font-size:   1rem;
  font-weight: 800;
  flex:        1 1 0;
  min-width:   0;
}

.web-card-text .web-price-sel-btn { width: var(--web-strip-sel-w); }

.web-line-target-goal {
  display:     block;
  font-weight: 600;
  opacity:     0.85;
}

.web-line-target-goal::after { content: ":"; }

.web-line-target-price {
  display:     flex;
  align-items: center;
  gap:         20px;
  white-space: nowrap;
}

.web-card[data-folded] :is(.web-card-media, .web-card-stats, .web-card-text-body, .web-chips) { display: none; }

.web-card[data-folded] .web-card-text {
  --web-card-veil:     color-mix(in srgb, var(--fluorGrey1) 65%, transparent);

  background-image:    linear-gradient(var(--web-card-veil), var(--web-card-veil)), var(--web-card-img);
  background-size:     cover;
  background-position: center;
}

.web-card[data-folded] {
  --web-card-radius-in: calc(var(--web-radius) - var(--web-card-border));

  overflow: visible;
}

.web-card[data-folded] .web-card-head { border-radius: var(--web-card-radius-in) 0 0 var(--web-card-radius-in); }

.web-card[data-folded] .web-card-title { flex: 1 1 auto; }
.web-card[data-folded] .web-card-text { border-radius: 0 var(--web-card-radius-in) var(--web-card-radius-in) 0; }

.web-price-label {
  font-weight: 800;
  font-size:   0.9rem;
  font-style:  italic;
  opacity:     0.65;
}

.web-price-off {
  display:        inline-flex;
  align-items:    center;
  height:         18px;
  padding:        0 7px;
  border-radius:  var(--web-radius-pill);
  background:     var(--fluorNavy);
  color:          var(--fluorGrey1);
  font-family:    var(--web-font-mono);
  font-weight:    700;
  font-size:      0.66rem;
  vertical-align: middle;
}

.web-price-off[hidden] { display: none; }

.web-price-sel-text .web-price-off { margin-left: 6px; }

.web-line-target-claim { color: inherit; }

.web-line-target .web-price-now {
  color:       var(--shadowNavy);
  white-space: nowrap;
  margin-right: 6px;
}

.web-price-sel {
  position: relative;
  display:  inline-flex;
}

.web-price-sel-btn {
  --sel-bg: var(--fluorGrey1);
  --sel-fg: var(--shadowNavy);

  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  height:        38px;
  max-width:     20em;    
  text-align:    left;
  padding:       0 14px 0 18px;
  border:        0;
  border-radius: 6px;
  background:    var(--sel-bg);
  color:         var(--sel-fg);
  font-family:   var(--web-font-mono);
  font-weight:   700;
  font-size:     0.78rem;
  cursor:        pointer;
  transition:    background var(--web-dur), color var(--web-dur), box-shadow var(--web-dur);
}

.web-price-sel-text {
  display:   grid;
  min-width: 0;
}

.web-price-sel-text > * {
  grid-area:   1 / 1;
  min-width:   0;
  white-space: nowrap;
}

.web-price-sel-size { visibility: hidden; }

.web-price-sel-current {
  overflow:      hidden;
  text-overflow: ellipsis;
}

.web-price-sel-btn::after {
  content:       "";
  flex:          0 0 auto;
  width:         6px;
  height:        6px;
  border-right:  2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform:     translateY(-2px) rotate(45deg);
  transition:    transform var(--web-dur);
}

.web-price-sel-btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

.web-price-sel-btn:hover,
.web-price-sel-btn:focus-visible,
.web-price-sel-btn[aria-expanded="true"] {
  background: var(--sel-fg);
  color:      var(--sel-bg);
  outline:    none;
}

.web-price-sel-menu {
  position:      absolute;
  top:           calc(100% + 6px);
  right:         0;
  z-index:       var(--web-menu-z);
  min-width:     100%;
  margin:        0;
  padding:       6px;
  list-style:    none;
  border-radius: var(--web-radius);
  background:    var(--fluorGrey1);
  color:         var(--shadowNavy);
  box-shadow:    var(--shadow-card), 0 0 0 1px var(--hairline);
}

.web-price-sel-menu[hidden] { display: none; }

.web-price-sel-opt {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  width:           100%;
  height:          var(--web-control-h);
  padding:         0 12px;
  border:          0;
  border-radius:   var(--web-radius-sm);
  background:      transparent;
  color:           inherit;
  font-family:     var(--web-font-mono);
  font-weight:     700;
  font-size:       0.78rem;
  text-align:      left;
  cursor:          pointer;
}

.web-price-sel-opt:hover,
.web-price-sel-opt:focus-visible {
  background: var(--shadowNavy);
  color:      var(--fluorGrey1);
  outline:    none;
}

.web-price-sel-name::before {
  content:       "";
  display:       inline-block;
  width:         6px;
  height:        6px;
  margin-right:  8px;
  border-radius: 50%;
  background:    currentColor;
  opacity:       0;
}

.web-price-sel-opt[aria-checked="true"] .web-price-sel-name::before { opacity: 1; }

.web-price-sel-price {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
}

.web-card-text-price {
  flex:           0 0 var(--web-price-col-w);
  align-self:     end;
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            4px;
  font-family:    var(--web-font-title);
  white-space:    nowrap;
  padding-right:  32px;

}

.web-price-item {
  display:         flex;
  align-self:      stretch;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
}

.web-price-includes {
  font-weight: 600;
  font-size:   0.78rem;
  font-style:  italic;
  color:       var(--secondaryGrey2);
}

.web-price-item-label,
.web-price-item-value {
  color:       var(--secondaryGrey2);
  font-weight: 700;
  font-size:   0.78rem;
  font-style:  italic;
}

.web-price-total {
  margin-top:    4px;
  padding:       3px 8px;
  margin-inline: -8px;
  border-radius: var(--web-radius-sm);
  background:    var(--web-card-soft);
}

.web-price-total .web-price-item-label,
.web-price-total .web-price-item-value {
  color:       var(--web-card-soft-fg);
  font-weight: 400;
}

.web-price-discount .web-price-item-label,
.web-price-discount .web-price-item-value { color: var(--softFuchsia); }

.web-price-subtotal {
  margin-top:  4px;
  padding-top: 6px;
  border-top:  1px solid var(--secondaryGrey2);
}

.web-price-subtotal .web-price-item-label,
.web-price-subtotal .web-price-item-value {
  color:       var(--secondaryGrey3);
  font-weight: 400;
}

.web-price-discount[hidden],
.web-price-subtotal[hidden] { display: none; }

.web-price-now {
  color:       var(--shadowNavy);
  font-weight: 800;
  font-style:  italic;
  font-size:   2.4rem;
  line-height: 1;
  min-width:            3.2em;
  text-align:           right;
  font-variant-numeric: tabular-nums;
}

.web-price-item-value::after { content: "\00a0€"; }

.web-price-now:not(:has(.web-price-per))::after,
.web-price-sel-value:not(:has(.web-price-per))::after { content: "\00a0€"; }

.web-price-per { white-space: nowrap; }

.web-price-per::before { content: "\00a0€/"; }

.web-price-per::after {
  --web-icon: url("../assets/img/account.svg");

  content:        "";
  display:        inline-block;
  width:          0.72em;
  height:         0.72em;
  vertical-align: baseline;
}

.web-price-note {
  font-family: var(--web-font-body);
  font-weight: 400;
  font-style:  italic;
  font-size:   0.78rem;
  color:       var(--secondaryGrey2);
}

.web-card-text p { text-align: left; }

.web-line {
  display:     flex;
  align-items: baseline;
  gap:         12px;
}

.web-line-term {
  flex:        0 0 var(--web-line-term-w);
  display:     flex;
  align-items: baseline;
  gap:         16px;
  font-weight: 800;
}

.web-line-ico {
  flex:              none;
  width:             var(--web-icon-22);
  height:            var(--web-icon-22);
  transform: translateY(4px);
  --web-icon: var(--line-ico);
}

.web-line-desc {
  flex:        1 1 auto;
  width:       auto;
  min-width:   0;
  font-weight: 400;
}

@media (max-width: 800px) {
  .web-nav { grid-template-columns: repeat(2, auto); }
}

@media (max-width: 720px) {
  .web-card { grid-template-columns: 1fr; }
  .web-card[data-folded] .web-card-head { border-radius: var(--web-card-radius-in) var(--web-card-radius-in) 0 0; }
  .web-card[data-folded] .web-card-text { border-radius: 0 0 var(--web-card-radius-in) var(--web-card-radius-in); }
  .web-header-inner { grid-template-columns: auto 1fr auto; }

  :root { --web-indent: 0px; }

  .web-card-title,
  .web-card-stats { flex: 0 0 auto; }

  .web-card-text      { padding-right: 18px; }
  .web-card-text-body { flex-direction: column; }

  .web-card-text-price {
    align-self: flex-end;
    margin-top: 12px;
    flex-basis: auto;
    padding-right: 0;
  }

  .web-line-target {
    flex-direction: column;
    align-items:    flex-start;
    gap:            4px;
    white-space:    normal;
    padding-inline: 14px;
  }

  .web-line-target-price {
    align-self:      stretch;
    justify-content: flex-end;
    flex-wrap:       wrap;
    row-gap:         8px;
  }

  .web-card-text .web-price-sel     { flex: 1 1 100%; }
  .web-card-text .web-price-sel-btn { width: 100%; justify-content: space-between; }

  .web-section-tab { display: none; }

  .web-line-target-claim { flex: 0 1 auto; }

  .web-line      { flex-direction: column; gap: 2px; }
  .web-line-term { flex: 0 0 auto; }
}

@media (max-width: 520px) {
  .web-header-inner {
    grid-template-columns: 1fr auto;
    row-gap:               10px;
    column-gap:            12px;
  }

  .web-header-logo { grid-area: 1 / 1; }
  .web-lang        { grid-area: 1 / 2; }
  .web-nav         { grid-area: 2 / 1 / 3 / -1; }

  .web-chip[data-size="2"],
  .web-chip[data-size="3"] { min-width: 0; }

  .web-price-now { font-size: 2rem; }

  :root { --web-header-h: 128px; }

  .web-section { padding-inline: 16px; }

  .web-hero     { gap: 24px; padding-block: clamp(40px, 8vh, 220px); }
  .web-hero img { width: min(240px, 55vw); }

  .web-kicker { width: auto; padding-inline: 18px; }
}

.web-chips { display: flex; flex-wrap: wrap; gap: var(--web-chip-gap); margin-top: 14px; list-style: none; }

.web-chip {
  --chip-bg: var(--fluorGrey1);
  --chip-fg: var(--shadowNavy);

  font-family:   var(--web-font-mono);
  font-weight:   700;
  font-size:     0.78rem;
  padding:       5px 18px;
  border-radius: var(--web-radius-pill);
  background:    var(--chip-bg);
  color:         var(--chip-fg);
  border:        0;
  text-align:    left;
  white-space:   nowrap;
  cursor:        pointer;
  transition:    background var(--web-dur), color var(--web-dur), box-shadow var(--web-dur);
}

.web-chip:hover,
.web-chip:focus-visible {
  background: var(--chip-fg);
  color:      var(--chip-bg);
  box-shadow: inset 0 0 0 2px var(--chip-bg);
}

.web-chip[data-size="1"] { min-width: var(--web-chip-u); }
.web-chip[data-size="2"] { min-width: var(--web-chip-2u); }
.web-chip[data-size="3"] { min-width: var(--web-chip-3u); }

.web-card > .web-chips {
  grid-column: 1 / -1;
  margin-top:  0;
  padding:     14px 18px;
  border-top:  1px solid var(--web-card-bg);
}

.web-card > .web-chips .web-chip { --chip-bg: var(--web-card-soft); }

.web-line-on {
  background: var(--web-card-soft);
  box-shadow: 0 0 0 6px var(--web-card-soft);
  border-radius: var(--web-radius-sm);
}

.web-contact-form {
  display:               grid;
  grid-template-columns: 305px 1fr;
  gap:                   18px;
  margin-top:            var(--web-space);
  padding-inline:        var(--web-indent);
}

.web-field { display: grid; gap: 4px; grid-column: 1; }

.web-field-group { grid-column: 1; display: grid; gap: 6px; }

.web-check {
  display:     flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
  font-size:   0.78rem;
  color:       var(--shadowNavy);
}

.web-check input { width: 16px; height: 16px; accent-color: var(--shadowNavy); cursor: pointer; }

.web-field-full {
  grid-column:        2;
  grid-row:           1 / span 3;
  grid-template-rows: auto 1fr;
}

.web-field > span {
  font-family:    var(--web-font-mono);
  font-weight:    700;
  font-size:      0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--shadowNavy);
}

.web-field input,
.web-field textarea {
  font-family:   var(--web-font-body);
  font-weight:   600;
  font-size:     0.95rem;
  color:         var(--surfaceText);
  background:    var(--fluorGrey1);
  border:        1px solid var(--secondaryGrey2);
  border-radius: var(--web-radius-sm);
  padding:       0 10px;
  height:        var(--web-control-h);
}

.web-field textarea { height: auto; padding: 8px 10px; resize: vertical; }
.web-field-full textarea { height: 100%; }

.web-field input:focus-visible,
.web-field textarea:focus-visible {
  outline:        2px solid var(--basicNavy);
  outline-offset: 0;
}

.web-hp { position: absolute; left: -9999px; width: 1px; height: 1px; }

.web-contact-actions {
  grid-column:           2;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px;
}

.web-submit {
  height:         calc(var(--web-control-h) * 2);
  padding:        0 12px;
  border:         0;
  border-radius:  var(--web-radius-sm);
  background:     var(--shadowNavy);
  color:          var(--fluorGrey1);
  font-family:    var(--web-font-mono);
  font-weight:    700;
  font-size:      0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor:         pointer;
}

.web-submit:hover {
  background: var(--fluorGrey1);
  color:      var(--shadowNavy);
  box-shadow: inset 0 0 0 2px var(--shadowNavy);
}

.web-submit:focus-visible {
  outline:        3px solid var(--shadowNavy);
  outline-offset: 2px;
}

.web-section p.web-privacy {
  grid-column:   1 / -1;
  margin:        0 auto;
  font-size:     0.72rem;
  line-height:   1.6;
  font-weight:   700;
  font-style:    italic;
  text-align:    center;
  white-space:   pre-line;
  hyphens:       manual;    
  color:         var(--shadowNavy);
}

@media (max-width: 720px) {
  .web-contact-form { grid-template-columns: 1fr; }
  .web-contact-form .web-field,
  .web-contact-form .web-field-full,
  .web-contact-actions { grid-column: auto; grid-row: auto; }

  .web-field input,
  .web-field textarea { font-size: 16px; }

  .web-field input { height: 44px; }

  .web-check       { min-height: 24px; }
  .web-check input { width: 20px; height: 20px; }
}

@media (max-width: 520px) {
  .web-contact-actions { grid-template-columns: 1fr; }
}

.web-footer {
    display: flex;
    justify-content: center;
  padding: var(--web-space) 0;
  color:   var(--shadowNavy);
  background:    var(--fluorGrey2);

}

.web-footer-inner {
  max-width:       var(--web-max-w);
  margin:          0 auto;
  padding:         0 var(--web-space);
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             6px;
  text-align:      center;
  font-size:       0.85rem;
}

.web-wordmark {
  font-family:    var(--web-font-mono);
  font-weight:    900;
  font-size:      1rem;
  letter-spacing: var(--web-track-brand);
}

.web-header-logo .web-wordmark {
  -webkit-text-stroke: 1px var(--basicNavy);
  paint-order: stroke fill;
}
.web-l-t { color: var(--basicTurquoise); }
.web-l-c { color: var(--basicCoral); }
.web-l-h { color: var(--basicNavy); }
.web-l-h { color: var(--fluorGrey2); }
.web-l-e { color: var(--basicGold); }
.web-l-r { color: var(--basicNavy); }