/* Afinador y metrónomo. Portado del tema de aprendeguitarra.es (staging).
   El JS es el mismo archivo; aquí solo cambia el encaje visual. */
.ag-card-grid, .ag-price-grid, .ag-book-grid, .ag-tool-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2.25rem 0; }
.ag-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ag-tool { background: var(--ag-paper); border: 1px solid var(--ag-line); border-radius: var(--ag-radius); padding: clamp(1.5rem, 4vw, 2.5rem); }
.ag-tool label { display: block; font-weight: 700; margin: 1rem 0; }
.ag-tool select, .ag-tool input { display: block; margin-top: .4rem; max-width: 100%; width: 100%; }
.ag-tuner__note { color: var(--ag-gold); font-family: Fraunces, Georgia, serif; font-size: 4rem; font-weight: 700; margin: 1rem 0 0; }
.ag-tuner__state { color: var(--ag-muted); }
/* Herramientas abiertas. */
.ag-tools-page{background:var(--ag-paper)}
.ag-tools-page__hero{background:var(--ag-cream);padding:78px 0 58px}
.ag-tools-page h1,.ag-tool-card h2{color:var(--ag-ink);font-family:Fraunces,Georgia,serif;letter-spacing:-1px;line-height:1.08}
.ag-tools-page h1{font-size:clamp(36px,5vw,54px);margin:0;max-width:20ch}
.ag-tools-page h1 em{color:var(--ag-gold)}
.ag-tools-page__hero>.agp-container>p:not(.agp-eyebrow){color:var(--ag-muted);font-size:17px;line-height:1.7;margin:20px 0 0;max-width:62ch}
.ag-tools-page__content{padding:58px 0 76px}
.ag-tools-page__grid{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ag-tool-card{background:#fffaf0;border:1px solid var(--ag-line);border-radius:20px;padding:clamp(24px,4vw,36px)}
.ag-tool-card--metronome{background:#e3eee8}
.ag-tool-card__heading{align-items:center;display:flex;gap:14px}
.ag-tool-card__heading .agp-eyebrow{margin:0 0 6px}
.ag-tool-card h2{font-size:28px;margin:0}
.ag-tool-card__icon{align-items:center;background:var(--ag-forest);border-radius:13px;color:var(--ag-gold-soft);display:flex;flex:0 0 46px;font-size:24px;height:46px;justify-content:center}
.ag-tool-card__intro{color:var(--ag-muted);font-size:14px;line-height:1.65;margin:22px 0}
.ag-tuner-readout{align-items:baseline;border-bottom:1px solid var(--ag-line);display:flex;gap:14px;min-height:100px}
.ag-tuner-readout__note{color:var(--ag-forest);font-family:Fraunces,Georgia,serif;font-size:70px;font-weight:700;letter-spacing:-3px;line-height:1;margin:0}
.ag-tuner-readout p:last-child{color:var(--ag-muted);font-size:13px}
.ag-tuner-meter{align-items:center;display:grid;gap:10px;grid-template-columns:28px 1fr 28px;margin:23px 0 0}
.ag-tuner-meter>span{color:var(--ag-muted);font-size:10px;font-weight:700}
.ag-tuner-meter>span:last-child{text-align:right}
.ag-tuner-meter__track{background:linear-gradient(90deg,#d99c8e,#e5c377 35%,#8fb99f 46%,#8fb99f 54%,#e5c377 65%,#d99c8e);border-radius:999px;height:8px;position:relative}
.ag-tuner-meter__track i{background:var(--ag-ink);border:2px solid var(--ag-paper);border-radius:50%;height:18px;left:calc(50% + var(--ag-tuner-position,0%));position:absolute;top:-5px;transform:translateX(-50%);width:18px}
.ag-tuner-cents{color:var(--ag-forest);font-size:14px;font-weight:800;margin:15px 0 5px}
.is-in-tune .ag-tuner-cents{color:#387b4e}
.ag-tool-card__state{color:var(--ag-muted);font-size:13px;line-height:1.5;margin:0;min-height:40px}
.ag-tool-card__actions{display:flex;gap:12px;margin-top:18px}
.ag-tools-button-secondary{background:transparent;border:0;color:var(--ag-forest);cursor:pointer;font:inherit;font-size:13px;font-weight:800;padding:12px 4px}
.ag-tuner-strings{display:flex;flex-wrap:wrap;gap:7px;margin-top:25px}
.ag-tuner-strings span{border:1px solid var(--ag-line);border-radius:999px;color:var(--ag-muted);font-size:11px;padding:6px 9px}
.ag-tuner-strings span.is-target{background:var(--ag-forest);border-color:var(--ag-forest);color:#fff}
.ag-tool-card__fineprint{color:var(--ag-muted);font-size:11px;line-height:1.45;margin:18px 0 0}
.ag-metronome-beats{display:flex;flex-wrap:wrap;gap:8px;margin:23px 0 12px}
.ag-metronome-beats span,.ag-metronome-beats button{align-items:center;background:rgba(255,253,248,.82);border:1px solid rgba(13,68,56,.14);border-radius:50%;color:#38554d;display:flex;font-family:Fraunces,Georgia,serif;font-size:15px;font-weight:700;height:40px;justify-content:center;width:40px;transition:transform .09s ease-out,background-color .09s,border-color .09s,box-shadow .09s}
.ag-metronome-beats button{padding:0;font:inherit;font-family:Fraunces,Georgia,serif;font-weight:700;-webkit-appearance:none;appearance:none}
.ag-metronome-beats button.is-editable{cursor:pointer;transition:border-color .12s,color .12s}
.ag-metronome-beats button.is-editable:hover{border-color:var(--ag-gold);color:var(--ag-gold)}
.ag-metronome-beats span.is-accent,.ag-metronome-beats button.is-accent{border-color:var(--ag-gold);color:var(--ag-gold)}
.ag-metronome-beats span.is-active,.ag-metronome-beats button.is-active{background:var(--ag-forest);border-color:var(--ag-forest);color:#fff;transform:scale(1.22);box-shadow:0 0 0 6px rgba(18,61,52,.16)}
.ag-metronome-beats span.is-accent.is-active,.ag-metronome-beats button.is-accent.is-active{background:var(--ag-gold);border-color:var(--ag-gold);box-shadow:0 0 0 6px rgba(198,142,61,.22)}
/* "Latido" grande: se ilumina en cada pulso (dorado en el acento) para que se
   siga con el rabillo del ojo sin leer los números -- Pedro, 31 ago 2026. */
.ag-metronome-pulse{width:52px;height:52px;margin:6px auto 16px;border-radius:50%;border:2px solid rgba(13,68,56,.16);background:transparent;transition:transform .1s ease-out,background-color .1s,border-color .1s}
.ag-metronome-pulse.is-hit{background:var(--ag-forest);border-color:var(--ag-forest);transform:scale(1.16)}
.ag-metronome-pulse.is-hit-accent{background:var(--ag-gold);border-color:var(--ag-gold);transform:scale(1.28)}
.ag-metronome-hint{color:#5a7169;font-size:12px;line-height:1.45;margin:0 0 4px;min-height:16px}
.ag-metronome-current{color:#38554d;font-size:13px;font-weight:700;margin:0 0 22px;min-height:20px}
.ag-tools-field{color:var(--ag-ink);display:block;font-size:12px;font-weight:800;margin:18px 0}
.ag-tools-field>span{color:var(--ag-gold);float:right}
.ag-tools-field select{background:var(--ag-paper);border:1px solid var(--ag-line);border-radius:10px;color:var(--ag-ink);display:block;font:inherit;font-weight:500;margin-top:8px;padding:11px;width:100%}
/* Más alto y con más "aire" alrededor, y touch-action:none para que
   arrastrarlo no compita con el scroll de la página en móvil -- un beta
   tester reportó el 24 de agosto de 2026 que no conseguía moverlo (la
   lógica del tempo en sí funciona bien, comprobado con datos reales). */
.ag-tools-field input[type=range]{accent-color:var(--ag-gold);display:block;margin-top:11px;width:100%;height:28px;touch-action:none}
.ag-tuner-meter__track i{transition:left .18s cubic-bezier(.22,.61,.36,1)}
.is-in-tune .ag-tuner-meter__track i{background:#387b4e;box-shadow:0 0 0 6px rgba(56,123,78,.15)}
.ag-tuner-strings__label{color:var(--ag-muted);font-size:12px;font-weight:700;line-height:1.45;margin:23px 0 -13px}
.ag-tuner-strings button{align-items:center;background:transparent;border:1px solid var(--ag-line);border-radius:999px;color:var(--ag-muted);cursor:pointer;display:inline-flex;font:inherit;font-size:11px;gap:6px;padding:7px 10px;transition:background-color .15s,border-color .15s,color .15s,transform .15s}
.ag-tuner-strings button span{border:0;font-size:8px;padding:0}
.ag-tuner-strings button:hover,.ag-tuner-strings button:focus-visible{border-color:var(--ag-gold);color:var(--ag-forest);outline:0}
.ag-tuner-strings button.is-target{background:var(--ag-forest);border-color:var(--ag-forest);color:#fff}
.ag-tuner-strings button.is-playing{background:var(--ag-gold);border-color:var(--ag-gold);color:#fff;transform:translateY(-2px)}

@media (max-width: 781px) {
	.ag-section { padding-block: 3.5rem; }
	.agp-hero { padding: 58px 0 72px; }
	.agp-hero__grid { gap: 50px; grid-template-columns: 1fr; }
	.agp-display { max-width: 16ch; }
	.agp-hero__photo { max-width: 570px; }
	.agp-claims__inner { gap: 10px 24px; justify-content: flex-start; }
	.agp-paths__grid { grid-template-columns: 1fr; }
	.agp-podcast__grid { grid-template-columns: 1fr; }
	.agp-faq { padding: 54px 0; }
	.agp-faq__item summary { font-size: 17px; padding: 17px 18px; }
	.agp-faq__answer { padding: 0 18px 18px; }
	.agp-about { padding: 60px 0; }
	.agp-about__grid { gap: 44px; grid-template-columns: 1fr; }
	.agp-about__portrait { max-width: 570px; }
	.agp-how { padding: 54px 0; }
	.ag-card-grid, .ag-price-grid, .ag-book-grid, .ag-tool-grid { grid-template-columns: 1fr; }
	.ag-learn-featured__grid, .ag-learn-articles__grid { grid-template-columns: 1fr; }
	.ag-academy__paths { grid-template-columns: 1fr; }
	.ag-podcast-page__feature-grid, .ag-podcast-page__promise-inner { gap: 36px; grid-template-columns: 1fr; }
	.ag-podcast-page__section-head { align-items: start; flex-direction: column; }
	.ag-podcast-page__grid { grid-template-columns: 1fr; }
	.ag-books-page__grid { grid-template-columns: 1fr; }
	.ag-pricing-page__grid { gap: 30px; grid-template-columns: 1fr; }
	.ag-resources__intro{align-items:start;flex-direction:column}.ag-resources__grid{grid-template-columns:1fr}
	.ag-pricing-card--featured { transform: none; }
	.ag-books-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); padding: 0; }
	.ag-books-card img { grid-row: span 3; height: 100%; }
	.ag-books-card__type { margin: 20px 20px 7px; }
	.ag-books-card h2 { margin: 0 20px 9px; }
	.ag-books-card > p:not(.ag-books-card__type) { margin: 0 20px 20px; }
	.ag-article__author { padding: 20px; }
	.ag-about-page__grid, .ag-about-page__pillars { grid-template-columns: 1fr; }
	.ag-about-page__portrait { max-width: 570px; }
	.ag-about-page__method { align-items: flex-start; flex-direction: column; }
	.ag-price--featured { transform: none; }
	.ag-header { height: 74px; padding-inline: 20px; }
	.ag-header__inner { gap: 12px; }
	.ag-menu-toggle { display: block; }
	.ag-nav { background: var(--ag-paper); border-bottom: 1px solid var(--ag-line); box-shadow: var(--ag-shadow); display: none; left: 0; margin: 0; padding: 8px 20px 16px; position: absolute; right: 0; top: 74px; }
	.ag-nav.is-open { display: block; }
	.ag-nav__list { align-items: stretch; flex-direction: column; gap: 0; }
	.ag-nav__list a { border-bottom: 1px solid var(--ag-line); font-size: 14px; padding: 12px 4px; }
	.ag-nav__list a::after { bottom: 5px; left: 4px; right: auto; width: 34px; }
	.ag-header__cta { padding: 11px 14px; }
	.ag-orientador-modal { padding: 10px; }
	.ag-orientador-modal__dialog { height: calc(100vh - 20px); }
	.ag-footer__inner { align-items: start; flex-direction: column; }
}
@media (max-width:781px){.ag-tools-page__grid{grid-template-columns:1fr}}
@media(max-width:781px){.ag-study-access__book-grid{gap:40px;grid-template-columns:1fr}.ag-study-access__book figure{max-width:190px}.ag-first-rumba-course__score>.agp-container{align-items:flex-start;flex-direction:column}.ag-first-rumba-course__score .agp-button{flex:auto}.ag-tuner-strings{gap:6px}.ag-tuner-strings button{justify-content:center;min-width:calc(50% - 3px)}}

/* Variables que el bloque portado espera y que el area de alumno no definia. */
body.ag-area{--ag-cream:#f7f3ea;--ag-gold-soft:#f1e4cc;--ag-ink:#17231f;--ag-radius:18px}

/* Equivalencias de las clases genericas del tema de origen. */
body.ag-area .agp-eyebrow{margin:0;color:var(--ag-green);font-size:11px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase}
body.ag-area .agp-button{border:0;border-radius:9px;background:var(--ag-forest);color:#fff;padding:12px 18px;font-size:14px;font-weight:700;cursor:pointer}
body.ag-area .ag-tools-button-secondary{border:1px solid var(--ag-line);border-radius:9px;background:transparent;color:var(--ag-forest);padding:12px 18px;font-size:14px;font-weight:700;cursor:pointer}

/* Encabezado de seccion dentro de una pantalla. */
body.ag-area .ag-screen-subhead{margin:26px 0 16px}
body.ag-area .ag-screen-subhead p{margin:0;color:var(--ag-green);font-size:11px;font-weight:700;letter-spacing:1.3px}
body.ag-area .ag-screen-subhead h2{margin:6px 0 0;color:var(--ag-forest);font:700 28px 'Fraunces',serif}

/* Las tres herramientas comparten retícula. */
body.ag-area .ag-tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;margin-bottom:22px}
body.ag-area .ag-tools-grid .ag-tool-card,body.ag-area .ag-timer-card{background:#fffefa;border:1px solid var(--ag-line);border-radius:16px;padding:22px}
body.ag-area .ag-tools-grid h2{margin:4px 0 0;color:var(--ag-forest);font:700 22px 'Fraunces',serif}

/* Temporizador: panel de Practicar. */
body.ag-area .ag-timer-actions{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 12px}
body.ag-area .ag-timer-actions button{flex:1 1 auto;min-width:78px;border:1px solid var(--ag-line);border-radius:10px;background:transparent;color:var(--ag-forest);padding:12px 10px;font-size:15px;font-weight:700;cursor:pointer}
body.ag-area .ag-timer-actions button:hover{background:#dcebe4}
body.ag-area .ag-timer-card.is-running{border-color:var(--ag-gold)}

/* Temporizador: pastilla flotante que acompana al alumno. */
.ag-timer-pill{position:fixed;right:18px;bottom:18px;z-index:1000;display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:14px;background:#123d34;color:#fff;box-shadow:0 14px 32px rgba(18,61,52,.28);font-family:'DM Sans',system-ui,sans-serif}
.ag-timer-pill__label{font-size:9px;letter-spacing:1.4px;opacity:.75}
.ag-timer-pill strong{font:700 19px 'Fraunces',serif;min-width:50px;text-align:center}
.ag-timer-pill button{display:flex;align-items:center;justify-content:center;border:0;background:rgba(255,255,255,.15);color:#fff;width:26px;height:26px;border-radius:7px;font-size:11px;line-height:1;cursor:pointer;padding:0}
.ag-timer-pill button:hover{background:rgba(255,255,255,.28)}
.ag-timer-pill.is-paused{background:#5b5344}
.ag-timer-pill.is-done{background:#c68e3d;color:#2d2514}
.ag-timer-pill.is-done button{background:rgba(0,0,0,.14);color:#2d2514}

/* En movil la pastilla no debe tapar la barra inferior del area de alumno. */
@media(max-width:850px){body.ag-area .ag-timer-pill{bottom:94px}}
@media(max-width:900px){body.ag-area .ag-tools-grid{grid-template-columns:1fr}}