/* Gochi Hand, Juan Pablo del Peral. License: ./assets/fonts/gochi-hand-license.txt */
@font-face { font-family:"Gochi Hand"; src:url('./assets/fonts/gochi-hand.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
:root { --purple: #3b0c58; --ink: #211b25; --line: #d8cddd; --display-font:"Gochi Hand", "Trebuchet MS", Arial, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #e7e7e7 url('./assets/original/collage-sin-dial.jpg') center top / cover fixed no-repeat; font-family: Arial, Helvetica, sans-serif; line-height: 1.45; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .65rem 1rem; background: white; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
main, .site-footer { width: min(1020px, calc(100% - 2rem)); margin: auto; }
.original-stage { padding: 1.25rem 0 .75rem; }
.stage-composite { width: min(100%, 920px); height: auto; margin: auto; }
.stage-motto { width: fit-content; margin: .3rem auto 1.2rem; padding: .3rem 1rem; color: var(--purple); background: #fffffff0; font-family: var(--display-font); font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 400; line-height:1.2; text-align: center; }
.listen-panel { padding: 1.2rem; background: #fffffff5; border-radius: 16px; box-shadow: 0 8px 26px #211b2520; }
.station-deck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.station-card { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: .8rem; align-items: center; padding: .5rem 1rem; }
.station-card + .station-card { border-left: 1px solid var(--line); }
.station-card h2 { margin: 0; font-size: 1.06rem; color: var(--purple); }
.station-location { grid-column: 1; margin: .1rem 0; font-size: .8rem; color: #625967; }
.station-card button { grid-column: 2; grid-row: 1 / span 3; display: flex; align-items: center; justify-content: center; gap: .4rem; min-width: 92px; min-height: 48px; padding: .6rem .8rem; border: none; border-radius: 24px; color: white; background: var(--purple); font-size: .8rem; font-weight: bold; cursor: pointer; }
.station-card[data-active="true"] button[aria-pressed="true"] { background: #b52238; }
.station-feedback { grid-column:1 / -1; display:flex; align-items:center; gap:.6rem; min-height:20px; margin:.3rem 0 0; }
.station-state { flex:1; min-width:0; min-height:1.1em; max-width:100%; margin:0; font-size:.75rem; overflow-wrap:anywhere; }
.playback-mascot { display:block; flex:0 0 78px; width:78px; height:36px; }
.playback-mascot > svg { display:block; width:100%; height:100%; overflow:visible; }
.mascot-fish { transform-origin:42px 24px; animation:chanquete-swim 1.6s ease-in-out infinite; }
.mascot-heart { animation:chanquete-heart 2.2s ease-out infinite; }
.mascot-bubble { animation:chanquete-heart 2.2s -.9s ease-out infinite; }
.mini-player .playback-mascot { flex-basis:52px; width:52px; height:28px; }
@keyframes chanquete-swim { 0%,100% { transform:translate(-2px,1px) rotate(-4deg); } 50% { transform:translate(2px,-1px) rotate(3deg); } }
@keyframes chanquete-heart { 0% { opacity:0; transform:translate(-5px,8px) scale(.9); } 25%,65% { opacity:1; } 100% { opacity:0; transform:translate(4px,-7px) scale(1.05); } }
@media (prefers-reduced-motion:reduce) { .playback-mascot * { animation:none; } }
.station-card button { grid-row: 1 / span 2; }
.legal-page { max-width: 850px; margin: 1.5rem auto; padding: clamp(1.2rem, 4vw, 3rem); background: #fffffff5; border-radius: 16px; }
.legal-page h1 { color: var(--purple); font-size: 1.8rem; }
.legal-page p { line-height: 1.7; overflow-wrap: anywhere; }
.legal-page .legal-note { padding: 1rem; background: #eee8f1; border-left: 3px solid var(--purple); }
.contact { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0 0; padding: 1.4rem 2rem; background: #fffffff5; border-radius: 16px; }
.contact h2 { margin: 0 0 .25rem; font-size: .85rem; font-weight: normal; }
.section-links { display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:clamp(.4rem,2vw,1.3rem); width:min(1020px,calc(100% - 1.25rem)); margin:0 auto; padding:0 .5rem; background:#fffffff5; border-radius:0 0 16px 16px; }
.section-links a { display:flex; align-items:center; justify-content:center; flex:0 0 auto; min-height:44px; color:var(--purple); font-size:.9rem; white-space:nowrap; text-underline-offset:.25rem; }
.nav-short { display:none; }
@media (max-width:580px) {
  .section-links { justify-content:space-evenly; gap:.3rem; padding:0 .25rem; }
  .section-links a { font-size:clamp(.72rem,3.2vw,.85rem); }
  .nav-wide { display:none; }
  .nav-short { display:inline; }
}
.advertising { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:2rem; scroll-margin-top:1rem; }
.advertising h2 { font-size:1rem; font-weight:bold; color:var(--purple); }
.advertising h3 { color:var(--purple); margin:.5rem 0 1rem; font-family:var(--display-font); font-weight:400; font-size:1.8rem; line-height:1.25; }
.advertising-copy p { margin:1rem 0; }
.advertising-options { padding-left:1.2rem; }
.advertising-options li { margin:.85rem 0; }
.advertising .phone { display:block; margin:.5rem 0 1rem; }
.contact-form { background:#f2edf4; padding:1.25rem; border-radius:12px; min-width:0; }
.contact-form h3 { font-size:1.25rem; }
.contact-form > p { font-size:.88rem; }
.contact-form label { display:block; font-size:.88rem; margin:.85rem 0; font-weight:bold; }
.contact-form label > span { font-weight:normal; }
.contact-form input:not([type=checkbox]), .contact-form textarea, .contact-form select { display:block; width:100%; margin-top:.35rem; border:1px solid #ab9bb5; border-radius:7px; background:white; padding:.7rem; font:inherit; font-size:1rem; color:var(--ink); }
.contact-form textarea { resize:vertical; }
.contact-form .consent { display:flex; gap:.65rem; align-items:flex-start; font-weight:normal; line-height:1.5; }
.consent input { width:20px; height:20px; flex:0 0 20px; margin:0; accent-color:var(--purple); }
.contact-submit { border:0; cursor:pointer; background:var(--purple); text-align:center; }
.form-response:empty { display:none; }
.contact-result { border-top:1px solid var(--line); margin-top:1rem; padding-top:1rem; }
.message-preview { white-space:pre-wrap; overflow-wrap:anywhere; font-size:.88rem; }
.contact-form .action-note { font-size:.78rem; color:#625967; margin-bottom:0; }
@media(max-width:700px) { .advertising { grid-template-columns:1fr; gap:1.25rem; } .contact-form { padding:1rem; } }
.dedications { margin: 1rem 0 0; padding: clamp(1.2rem, 4vw, 2rem); border-radius: 16px; background: #fffffff5; }
.dedications h2 { margin: 0 0 .7rem; color: var(--purple); font-family: var(--display-font); font-weight:400; font-size: clamp(1.65rem, 4vw, 2.15rem); line-height:1.2; }
.dedications p { margin: 0; max-width: 760px; }
.dedication-number { display:inline-block; white-space:nowrap; }
.dedication-steps { padding-left: 1.3rem; margin: 1.1rem 0; }
.dedication-steps li { padding-left: .25rem; margin: .65rem 0; }
.dedication-button { display: inline-block; padding: .8rem 1.1rem; border-radius: 24px; color: white; background: #17663c; font-weight: bold; text-decoration: none; }
.contact-whatsapp { display:block; width:fit-content; max-width:100%; min-height:48px; margin:1.25rem auto 0; text-align:center; }
.dedication-conditions { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1rem; font-size: .88rem; }
.dedication-conditions summary { color: var(--purple); cursor: pointer; padding: .2rem 0; }
.dedication-conditions ul { padding-left: 1.3rem; }
.dedication-conditions li { margin: .6rem 0; }
.phone { color: var(--purple); font-size: 1.55rem; font-weight: bold; text-decoration: none; }
.contact-form input:not([type="checkbox"]), .contact-form textarea, .contact-form select { font-size: max(16px,1rem); }
button, .dedication-button { touch-action: manipulation; }
.contact-submit:disabled { opacity: .65; cursor: wait; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.social-section { scroll-margin-top:1rem; }
.social-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:1.25rem; }
.social-card { display:flex; flex-direction:column; align-items:flex-start; position:relative; min-width:0; padding:1.15rem; border:1px solid var(--line); border-radius:12px; color:var(--purple); background:#f2edf4; text-decoration:none; }
.social-card:hover { background:#e9e0ef; border-color:var(--purple); }
.social-card strong { margin:.7rem 0 .15rem; font-size:1rem; }
.social-card > span:not(.social-icon):not(.social-arrow) { color:#625967; font-size:.78rem; }
.social-icon { display:grid; place-items:center; width:38px; height:38px; line-height:1; font-size:36px; font-weight:bold; }
.social-icon svg { width:34px; height:34px; }
.social-facebook { color:#0866c2; font-family:Arial,sans-serif; }
.social-x { color:#211b25; font-size:29px; }
.social-youtube { color:#c91c2d; }
.social-spotify { color:#17663c; }
.social-arrow { position:absolute; right:1rem; top:1rem; font-size:1.25rem; }
@media(max-width:700px) { .social-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; } .social-card { padding:.9rem; } }
.ad-slot { margin: 2rem 0 0; padding: 1.5rem 0; border-top: 1px solid #b8cbd3; }
.ad-slot h2 { font-size: .85rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 1rem; color: #526a76; }
.song-instructions { padding-top: .8rem; }
#tus-canciones > p + p { margin-top:.75rem; }
.song-button { display:block; width:fit-content; max-width:100%; min-height:48px; margin:1.25rem auto; background:var(--purple); text-align:center; }
#tus-canciones .song-button + p { margin-inline:auto; text-align:center; }
.dedications .action-note { margin-top: .65rem; color: #625967; font-size: .82rem; }
.artists-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin: 1.25rem auto 0; max-width: 760px; }
.artist-card { margin: 0; min-width: 0; padding: .55rem; background: #f2edf4; border-radius: 8px; text-align: center; }
.artist-card img { width: 100%; height: 150px; object-fit: contain; border-radius: 4px; }
.artist-card figcaption { margin: .45rem 0 .2rem; font-size: .9rem; font-weight: bold; color: var(--purple); }
.artist-card audio { display: block; width: 100%; min-width: 0; }
.artist-card button { min-height: 44px; max-width: 100%; border: 0; background: transparent; color: var(--purple); font-size: .78rem; cursor: pointer; }
.mini-player { position: fixed; z-index: 50; bottom: max(.65rem, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 1.25rem)); display: flex; gap: .7rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 3px 24px #211b2545; }
.mini-info { flex: 1; min-width: 0; }
.mini-info strong, .mini-info span { display: block; }
.mini-info strong { font-size: .85rem; color: var(--purple); }
.mini-info span { font-size: .75rem; overflow-wrap: anywhere; }
.mini-player button { min-height: 44px; padding: .5rem .75rem; border: 0; border-radius: 22px; color: white; background: var(--purple); cursor: pointer; white-space: nowrap; font-size: .8rem; }
.mini-player a { padding: .65rem 0; font-size: .75rem; }
.has-mini-player { padding-bottom: calc(var(--mini-player-height, 110px) + max(.65rem, env(safe-area-inset-bottom, 0px)) + 1rem); }
@media (max-width: 580px) { .artists-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; } .artist-card img { height: 115px; } .mini-player { gap: .5rem; padding: .55rem; } .mini-info strong { font-size: .76rem; } }
.campaign-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.campaign-grid a { display: flex; align-items: center; justify-content: center; min-width: 0; padding: .5rem; background: #fff; }
.campaign-grid a:focus-visible { outline: 3px solid #066d9f; outline-offset: 3px; }
.campaign-grid img { display: block; width: 100%; height: auto; object-fit: contain; }
.site-footer { display: flex; flex-wrap:wrap; justify-content: space-between; gap: .25rem 1rem; margin-top: .75rem; margin-bottom: 1rem; padding: .7rem 1rem; background: #ffffffe8; font-size: .75rem; color: #514459; }
.view-choice { flex:0 0 100%; text-align:center; }
.view-toggle { min-height:44px; padding:.65rem .9rem; border:0; background:transparent; color:inherit; font-size:.75rem; text-decoration:underline; text-underline-offset:.2em; cursor:pointer; touch-action:manipulation; }
:focus-visible { outline: 3px solid #b85400; outline-offset: 4px; }
@media (max-width: 800px) {
  .station-card { padding: .5rem .7rem; grid-template-columns: 1fr; text-align: center; }
  .station-card button { grid-column: 1; grid-row: 4; margin-top: .4rem; }
}
@media (max-width: 580px) {
  body { background-attachment: scroll; }
  main, .site-footer { width: calc(100% - 1.25rem); }
  .original-stage { padding-top: .75rem; }
  .stage-motto { margin-bottom: .5rem; }
  .listen-panel { padding: .4rem .9rem; }
  .station-deck { grid-template-columns: 1fr; }
  .station-card { grid-template-columns: minmax(0,1fr) auto; text-align: left; padding: .65rem .2rem; }
  .station-card + .station-card { border-left: none; border-top: 1px solid var(--line); }
  .station-card button { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .contact { padding: 1.2rem; gap: .7rem; }
  .campaign-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* A genuine wide layout, also when previewed in a narrow desktop browser. */
.desktop-view body { min-width:1100px; }
.desktop-view main, .desktop-view .site-footer { width:1020px; }
.desktop-view .section-links { width:1020px; justify-content:center; gap:1.3rem; }
.desktop-view .section-links a { font-size:.9rem; }
.desktop-view .nav-wide { display:inline; }
.desktop-view .nav-short { display:none; }
.desktop-view .station-deck { grid-template-columns:repeat(3,minmax(0,1fr)); }
.desktop-view .station-card { grid-template-columns:minmax(0,1fr) auto; padding:.5rem 1rem; text-align:left; }
.desktop-view .station-card + .station-card { border-top:0; border-left:1px solid var(--line); }
.desktop-view .station-card button { grid-column:2; grid-row:1 / span 2; margin-top:0; }
.desktop-view .artists-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.desktop-view .artist-card img { height:150px; }
.desktop-view .advertising { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; padding:1.4rem 2rem; }
.desktop-view .social-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }

/* PC only. The approved mobile/tablet rules above remain unchanged. */
@media (min-width:1024px) {
  main { display:grid; grid-template-columns:1.1fr 1fr; gap:1rem; align-items:start; }
  main > * { grid-column:1 / -1; min-width:0; }
  main > section[id], main > .ad-slot { margin-top:0; }
  .original-stage { padding:.75rem 0 0; }
  .stage-composite { width:620px; }
  .stage-motto { margin:.25rem auto .75rem; }
  #dedicatorias, #tus-canciones { grid-column:auto; align-self:stretch; padding:1.5rem; }
  #dedicatorias h2, #tus-canciones h2 { font-size:1.85rem; }
  #dedicatorias .dedication-button { display:block; width:fit-content; max-width:100%; margin-inline:auto; text-align:center; }
  #artistas, #redes-sociales { padding:1.5rem; }
  :root .artists-grid { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:none; gap:.9rem; }
  .artist-card { display:flex; flex-direction:column; }
  :root .artist-card img { height:140px; }
  .artist-card button { margin-top:auto; }
  :root .advertising { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:center; gap:1.5rem; padding:1.5rem; }
  .contact-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1rem; }
  .contact-form > * { grid-column:1 / -1; min-width:0; }
  .contact-form > label:nth-of-type(2), .contact-form > label:nth-of-type(3) { grid-column:auto; }
  .contact-form h3, .contact-form label { margin:0; }
  .contact-form textarea { height:100px; min-height:100px; }
  .contact-form .contact-submit { justify-self:start; }
  .ad-slot { padding:1rem 0; }
  .campaign-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
}

/* Free player surfaces share the native playback control, without resizing it. */
.station-card, .mini-player { cursor:pointer; }

/* Keep the final view control clear of the mobile audio dock. */
@media (max-width:580px) {
  .has-mini-player .site-footer .view-choice { padding-bottom:calc(max(72px, var(--mini-player-height, 72px)) + max(.65rem, env(safe-area-inset-bottom, 0px)) + .5rem); }
  .has-mini-player .site-footer .view-toggle { scroll-margin-bottom:calc(max(72px, var(--mini-player-height, 72px)) + max(.65rem, env(safe-area-inset-bottom, 0px)) + .5rem); }
}

/* Approved Chanquete art treatment: geometry and click targets stay unchanged. */
.stage-motto { background:transparent; }
.station-card button, .mini-player button {
  border-radius:44% 56% 49% 51% / 48% 47% 53% 52%;
  background:
    radial-gradient(circle at 83% 23%, transparent 0 3px, #a7f4df99 3.3px 4.2px, transparent 4.5px),
    radial-gradient(circle at 18% 75%, #ffe18b99 0 1.6px, transparent 1.9px),
    linear-gradient(155deg, #6d2383 0%, #45115f 58%, #225d68 100%);
  box-shadow:inset 0 0 0 1.5px #321148, inset 0 0 0 3px #f1c76a55, inset 0 -4px 0 #220c3640;
  text-shadow:0 1px 1px #220c3680;
}
.station-card[data-active="true"] button[aria-pressed="true"], .mini-player button[aria-pressed="true"] {
  background:
    radial-gradient(circle at 83% 23%, transparent 0 3px, #ffe1a599 3.3px 4.2px, transparent 4.5px),
    radial-gradient(circle at 18% 75%, #b8f7e899 0 1.6px, transparent 1.9px),
    linear-gradient(155deg, #ad315a 0%, #922341 58%, #6b214d 100%);
}
@media (hover:hover) { .station-card button:hover, .mini-player button:hover { filter:brightness(1.08); } }
/* Keep the 44px view control; move dock clearance outside the white footer. */
.site-footer { padding-top:.2rem; padding-bottom:.2rem; }
@media (max-width:580px) {
  .has-mini-player .site-footer .view-choice { padding-bottom:0; }
  .has-mini-player .site-footer { margin-bottom:calc(1rem + max(72px, var(--mini-player-height, 72px)) + max(.65rem, env(safe-area-inset-bottom, 0px)) + .5rem); }
}

/* Constant player geometry: reserve the existing fish and two text lines. */
.station-card { padding-block:0; }
.station-deck { grid-auto-rows:1fr; }
.station-feedback { height:36px; min-height:36px; }
.station-state {
  height:2.9em; min-height:2.9em; line-height:1.45;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}
.station-card .playback-mascot[hidden] { display:block !important; visibility:hidden; }
.station-card button { width:104px; min-width:104px; justify-self:center; white-space:nowrap; }
.station-card button > [aria-hidden] { width:1em; flex:none; text-align:center; }
@media (max-width:580px) { .station-card { padding-block:.15rem; } }
@media (min-width:581px) and (max-width:800px) { .station-card button { width:100%; } }
.desktop-view .station-card { padding-block:0; }
.desktop-view .station-card button { width:104px; }

/* Native artist disclosure; existing image and card geometry is retained. */
.more-artists { margin-top:1.25rem; }
.more-artists > summary { display:flex; align-items:center; justify-content:center; gap:.7rem; min-height:48px; padding:.65rem 1rem; border:1px solid var(--line); border-radius:12px; background:#f5eef8; color:var(--purple); font-size:.875rem; font-weight:bold; cursor:pointer; list-style:none; }
.more-artists > summary::-webkit-details-marker { display:none; }
.more-artists > .artists-grid { margin-top:1rem; }
.gallery-collapse { display:none; }
.more-artists[open] .gallery-expand { display:none; }
.more-artists[open] .gallery-collapse { display:inline; }
.more-artists[open] .gallery-chevron { transform:rotate(180deg); }

/* A single compact row; both controls retain their 44px touch height. */
.site-footer { flex-wrap:nowrap; align-items:center; gap:clamp(.25rem,1vw,.75rem); min-height:44px; padding:0 .5rem; font-size:clamp(.6875rem,3.1vw,.75rem); line-height:1.25; white-space:nowrap; }
.site-footer > span { flex:0 0 auto; }
.site-footer > a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; flex:0 0 auto; }
.site-footer .view-choice { flex:0 0 auto; display:flex; align-items:center; }
.site-footer .view-toggle { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 .25rem; font-size:inherit; line-height:inherit; white-space:nowrap; }