/* Web pública de Montevideo Music (montevideomusic.com).
   El mundo de MMG: el negro y blanco del logo de letras cortadas a mano, el verde de MMG sólo donde se actúa
   (botones, campos del pedido, foco), Space Grotesk muy pesada y apretada para los nombres a escala de afiche y
   JetBrains Mono sólo para datos (fechas, suscriptores, duraciones). Líneas de 1 px, sin sombras ni degradés de
   adorno. Oscuro por defecto (como MMG Console); claro con la luna/sol (cookie tontria-tema, la misma de /app). */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fuentes/space-grotesk-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fuentes/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --fondo: #0a0a0a;
  --fondo-2: #111111;
  --superficie: #161616;
  --borde: rgb(255 255 255 / 0.1);
  --borde-fuerte: rgb(255 255 255 / 0.2);
  --texto-1: #fafafa;
  --texto-2: #c2c2c2;
  --texto-3: #8f8f8f;
  --acento: #22c55e;
  --acento-hover: #4ade80;
  --acento-txt: #04130a;
  --acento-linea: #22c55e;
  --acento-suave: rgb(34 197 94 / 0.12);
  --error: #f87171;
  --velo-foto: rgb(10 10 10 / 0.72);
  --ver-oscuro: block;
  --ver-claro: none;
  --sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ancho: 1240px;
  --margen: clamp(16px, 4vw, 40px);
  --radio: 10px;
  --salida: cubic-bezier(0.16, 1, 0.3, 1);
}

:root.light {
  color-scheme: light;
  --fondo: #f4f4f2;
  --fondo-2: #ebebe8;
  --superficie: #ffffff;
  --borde: rgb(10 10 10 / 0.12);
  --borde-fuerte: rgb(10 10 10 / 0.24);
  --texto-1: #0b0b0b;
  --texto-2: #333333;
  --texto-3: #5c5c5c;
  --acento: #15803d;
  --acento-hover: #166534;
  --acento-txt: #ffffff;
  --acento-linea: #15803d;
  --acento-suave: rgb(21 128 61 / 0.1);
  --error: #b91c1c;
  --velo-foto: rgb(10 10 10 / 0.62);
  --ver-oscuro: none;
  --ver-claro: block;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto-1);
  font: 400 17px/1.55 var(--sans);
  font-feature-settings: 'ss01' on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--acento); }
::selection { background: var(--acento); color: var(--acento-txt); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: var(--borde-fuerte) var(--fondo); }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.mono, time, .dato { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.solo-oscuro { display: var(--ver-oscuro); }
.solo-claro { display: var(--ver-claro); }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--acento); color: var(--acento-txt); padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.saltar:focus { top: 12px; }

.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }

/* ------------------------------------------------------------------ botones */
.boton {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px;
  border-radius: 999px; border: 1px solid var(--borde-fuerte); background: transparent; color: var(--texto-1);
  font: 600 16px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--salida), color .2s var(--salida), border-color .2s var(--salida), transform .2s var(--salida);
}
.boton:hover { border-color: var(--texto-1); color: var(--texto-1); }
.boton:active { transform: translateY(1px); }
.boton-acento { background: var(--acento); border-color: var(--acento); color: var(--acento-txt); }
.boton-acento:hover, a.boton-acento:hover { background: var(--acento-hover); border-color: var(--acento-hover); color: var(--acento-txt); }
.boton svg { flex: none; }
.boton[disabled] { opacity: .55; cursor: progress; }

/* ------------------------------------------------------------------ barra */
.barra { position: sticky; top: 0; z-index: 30; background: var(--fondo); border-bottom: 1px solid var(--borde); }
.barra-fila { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.marca { display: inline-flex; align-items: center; flex: none; padding: 6px 0; }
.marca img { width: 74px; height: auto; }
.menu { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.menu a { padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--texto-2); font-weight: 500; font-size: 15px; }
.menu a:hover, .menu a[aria-current='page'] { color: var(--texto-1); }
.menu a[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.barra-acciones { display: flex; gap: 8px; align-items: center; }
.boton-tema, .boton-menu {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--borde); background: transparent; color: var(--texto-1); cursor: pointer;
}
.boton-tema:hover, .boton-menu:hover { border-color: var(--borde-fuerte); }
.tema-sol { display: none; }
:root.light .tema-sol { display: block; }
:root.light .tema-luna { display: none; }
.boton-menu { display: none; }
.barra .boton-acento, .barra .boton-miembros { min-height: 44px; padding: 10px 16px; font-size: 15px; }
.boton-miembros { gap: 8px; }
.menu .menu-miembros { display: none; }
.pie-miembros { margin-top: 20px; }
.pie-miembros .boton { min-height: 44px; padding: 10px 16px; font-size: 15px; color: var(--texto-1); }
.powered { letter-spacing: 0.01em; }
@media (max-width: 1100px) { .barra .boton-miembros { display: none; } .menu .menu-miembros { display: block; } }

@media (max-width: 900px) {
  .boton-menu { display: inline-grid; }
  .menu {
    position: fixed; inset: 69px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--fondo); border-bottom: 1px solid var(--borde); padding: 8px var(--margen) 20px;
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s var(--salida), transform .25s var(--salida), visibility 0s .25s;
  }
  .menu a { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; padding: 14px 4px; border-bottom: 1px solid var(--borde); border-radius: 0; color: var(--texto-1); }
  .barra[data-abierta] .menu { visibility: visible; opacity: 1; transform: none; transition: opacity .25s var(--salida), transform .25s var(--salida); }
  .barra-acciones { margin-left: auto; }
  .barra .boton-acento { display: none; }
}

/* ------------------------------------------------------------------ portada: el pedido es la portada */
.portada { position: relative; border-bottom: 1px solid var(--borde); }
.portada-grilla { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding-block: clamp(40px, 7vw, 96px) clamp(40px, 6vw, 80px); }
/* El h1 queda para buscadores y lectores de pantalla como una línea chica: el titular a la vista es la oración. */
.portada .titular-chico { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--texto-2); max-width: none; }
.bajada { margin-top: 20px; max-width: 46ch; color: var(--texto-2); font-size: clamp(1.02rem, 1.4vw, 1.18rem); }

/* La oración que se completa: «Quiero a [artista] para [evento] el [fecha] en [ciudad]». */
.oracion { margin-top: clamp(14px, 2vw, 22px); font-size: clamp(2rem, 5vw, 4rem); font-weight: 600; line-height: 1.32; letter-spacing: -0.035em; color: var(--texto-2); max-width: 22ch; }
.oracion .junto { white-space: nowrap; }
.oracion label { display: inline; }
.oracion .campo-linea {
  font: inherit; font-weight: 700; font-size: inherit; color: var(--texto-1); letter-spacing: -0.025em;
  background: transparent; border: 0; border-bottom: 3px solid var(--acento-linea); border-radius: 0;
  padding: 0 2px 2px; margin: 0 2px; min-height: 0; max-width: 100%;
  appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .2s var(--salida), color .2s;
}
.oracion select.campo-linea { padding-right: 1.1em; background: no-repeat right 0.05em center / 0.7em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2322c55e' stroke-width='2'/%3E%3C/svg%3E"); }
:root.light .oracion select.campo-linea { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2315803d' stroke-width='2'/%3E%3C/svg%3E"); }
.oracion select.campo-linea option { color: #0b0b0b; background: #fff; font-size: 16px; font-weight: 500; }
.oracion input.campo-linea { width: 7.4em; cursor: text; }
.oracion input[type='date'].campo-linea { width: 8.6em; }
.oracion input.campo-linea::placeholder { color: var(--texto-3); font-weight: 500; }
.oracion .campo-linea:hover { border-bottom-color: var(--texto-1); }
.oracion .campo-linea:focus-visible { outline: none; border-bottom-color: var(--texto-1); background: var(--acento-suave); }
.oracion-acciones { margin-top: 28px; font-size: 16px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.oracion-acciones p { color: var(--texto-3); font-size: 15px; max-width: 46ch; letter-spacing: 0; font-weight: 400; line-height: 1.5; }

.portada-medio { position: relative; }
.foto-escenario { border-radius: var(--radio); overflow: hidden; background: var(--superficie); border: 1px solid var(--borde); }
.foto-marco { position: relative; aspect-ratio: 4 / 5; background: var(--fondo-2); }
.foto-escenario img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--salida), transform 1.2s var(--salida); }
.foto-escenario img[data-saliendo] { opacity: 0; transform: scale(1.03); }
.foto-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; padding: 14px 16px; border-top: 1px solid var(--borde); color: var(--texto-1); }
.foto-pie strong { font-size: clamp(1.3rem, 2.2vw, 1.9rem); letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.foto-pie span { font-family: var(--mono); font-size: 12px; color: var(--texto-3); }
.foto-pie a { color: inherit; text-decoration: none; }
.foto-pie a:hover { color: var(--acento); }

@media (max-width: 900px) {
  .portada-grilla { grid-template-columns: 1fr; align-items: start; }
  .foto-marco { aspect-ratio: 16 / 9; }
  .oracion { max-width: none; }
}

/* ------------------------------------------------------------------ secciones */
.seccion { padding-block: clamp(56px, 9vw, 120px) 0; }
.seccion:last-of-type { padding-bottom: clamp(56px, 9vw, 120px); }
.seccion-cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(24px, 4vw, 44px); }
.seccion h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); max-width: 22ch; }
.seccion-cabeza p { max-width: 44ch; color: var(--texto-2); }
.texto { max-width: 68ch; color: var(--texto-2); }
.texto p + p { margin-top: 1em; }
.texto strong { color: var(--texto-1); font-weight: 600; }

/* El roster como afiche: nombres enormes, uno debajo del otro. */
.roster { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.roster li { border-bottom: 1px solid var(--borde); }
.roster a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px clamp(16px, 3vw, 36px); align-items: center; padding: clamp(14px, 2vw, 22px) 0; text-decoration: none; color: var(--texto-1); position: relative; }
.roster .avatar { width: clamp(48px, 6vw, 72px); height: clamp(48px, 6vw, 72px); border-radius: 999px; object-fit: cover; background: var(--fondo-2); border: 1px solid var(--borde); }
.roster .nombre { font-size: clamp(2.6rem, 11vw, 5.6rem); font-weight: 700; letter-spacing: -0.045em; line-height: 0.95; text-transform: uppercase; transition: color .25s var(--salida), transform .4s var(--salida); }
.roster .datos { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; color: var(--texto-3); font-size: 14px; text-align: right; }
.roster .datos .dato { font-size: 13px; color: var(--texto-2); }
.roster .flecha { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--borde); color: var(--texto-1); transition: background-color .25s, color .25s, border-color .25s; }
.roster a:hover .nombre { color: var(--acento); transform: translateX(6px); }
.roster a:hover .flecha { background: var(--acento); border-color: var(--acento); color: var(--acento-txt); }
.roster .generos { display: block; margin-top: 8px; font-size: 15px; color: var(--texto-3); letter-spacing: -0.01em; }
@media (max-width: 700px) {
  .roster a { grid-template-columns: auto minmax(0, 1fr); }
  .roster .datos { grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
  .roster .flecha { display: none; }
}
/* La foto que acompaña al cursor por el roster (sólo con mouse; ver web.js). */
.roster-foto { position: fixed; left: 0; top: 0; width: 260px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; pointer-events: none; z-index: 20; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.92); transition: opacity .2s var(--salida), transform .35s var(--salida); border: 1px solid var(--borde-fuerte); background: var(--fondo-2); }
.roster-foto[data-visible] { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.roster-foto img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (prefers-reduced-motion: reduce) { .roster-foto { display: none; } }

/* Libro de canales: datos con su fuente. */
.libro { width: 100%; border-collapse: collapse; font-size: 16px; }
.libro caption { text-align: left; color: var(--texto-3); font-size: 14px; padding-bottom: 14px; caption-side: bottom; padding-top: 14px; }
.libro th, .libro td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: baseline; }
.libro thead th { font: 500 12px/1.2 var(--mono); color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.04em; border-bottom-color: var(--borde-fuerte); }
.libro td.num, .libro th.num { text-align: right; padding-right: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.libro td a { text-decoration: none; font-weight: 600; }
.libro td a:hover { text-decoration: underline; }
.libro td small { display: block; color: var(--texto-3); font-size: 14px; margin-top: 2px; }

/* Tipos de evento: una lista de dos columnas, sin tarjetas. */
.eventos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 5vw, 72px); border-top: 1px solid var(--borde); }
.eventos li { padding: 22px 0 24px; border-bottom: 1px solid var(--borde); }
.eventos h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); letter-spacing: -0.03em; }
.eventos p { margin-top: 8px; color: var(--texto-2); max-width: 46ch; }
@media (max-width: 760px) { .eventos { grid-template-columns: 1fr; } }

/* Pasos: la secuencia sí informa, por eso van numerados. */
.pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.pasos li { counter-increment: paso; padding-top: 18px; border-top: 2px solid var(--texto-1); }
.pasos li::before { content: counter(paso); display: block; font: 600 14px/1 var(--mono); color: var(--texto-3); margin-bottom: 14px; }
.pasos h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.03em; }
.pasos p { margin-top: 10px; color: var(--texto-2); }
@media (max-width: 760px) { .pasos { grid-template-columns: 1fr; } }

/* Preguntas frecuentes */
.faq { border-top: 1px solid var(--borde); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 600; letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform .3s var(--salida); color: var(--acento); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .respuesta { padding: 0 0 22px; color: var(--texto-2); max-width: 66ch; }
.faq .respuesta p + p { margin-top: .8em; }

/* Cierre */
.cierre { margin-top: clamp(56px, 9vw, 120px); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); background: var(--fondo-2); }
.cierre .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-block: clamp(40px, 6vw, 72px); }
.cierre h2 { font-size: clamp(2rem, 5vw, 4rem); max-width: 16ch; }
.cierre-acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------------ página de artista */
.migas { padding-top: 22px; font-size: 14px; color: var(--texto-3); }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.migas li + li::before { content: '/'; margin-right: 6px; color: var(--borde-fuerte); }
.migas a { text-decoration: none; }
.artista-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; padding-block: clamp(24px, 4vw, 48px) clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--borde); }
.artista-cabeza h1 { font-size: clamp(3rem, 9vw, 7.5rem); text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.9; overflow-wrap: anywhere; }
.artista-cabeza .bajada { margin-top: 18px; }
.ficha { margin: 24px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 15px; }
.ficha dt { font: 500 12px/1.9 var(--mono); color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.04em; }
.ficha dd { margin: 0; color: var(--texto-1); }
.artista-acciones { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.artista-foto { aspect-ratio: 16 / 10; border-radius: var(--radio); overflow: hidden; background: var(--fondo-2); border: 1px solid var(--borde); position: relative; }
.artista-foto img { width: 100%; height: 100%; object-fit: cover; }
.artista-foto figcaption { position: absolute; right: 10px; bottom: 10px; padding: 4px 8px; border-radius: 6px; background: var(--velo-foto); color: #e5e5e5; font: 11px/1.3 var(--mono); }
@media (max-width: 900px) { .artista-cabeza { grid-template-columns: 1fr; } .artista-foto { order: -1; } }

.dos-columnas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; } }
.lista-simple { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.lista-simple li { padding: 14px 0; border-bottom: 1px solid var(--borde); color: var(--texto-2); }
.lista-simple li strong { color: var(--texto-1); font-weight: 600; display: block; }
.redes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.redes a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--borde); border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 500; }
.redes a:hover { border-color: var(--acento); }

/* Videos: miniatura + play; el reproductor de YouTube carga recién al tocar. */
.videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
/* Con una cantidad impar, el primero va grande: nunca queda uno solo al final. */
.videos .video:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
@media (max-width: 640px) { .videos { grid-template-columns: 1fr; } }
.video { margin: 0; }
.video-marco { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: #000 center / cover no-repeat; border: 1px solid var(--borde); }
.video-marco button { all: unset; position: absolute; inset: 0; cursor: pointer; display: block; }
.video-marco img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--salida), opacity .3s; }
.video-marco .play { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--acento); color: var(--acento-txt); transition: transform .3s var(--salida); }
.video-marco button:hover img { transform: scale(1.03); }
.video-marco button:hover .play { transform: scale(1.08); }
.video-marco button:focus-visible { outline: 2px solid var(--acento); outline-offset: -4px; }
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { margin-top: 10px; font-size: 15px; color: var(--texto-2); }
.video figcaption a { color: var(--texto-3); font-size: 13px; }
.escucha { border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.escucha p { color: var(--texto-2); max-width: 40ch; }
.escucha iframe { width: 100%; height: 352px; border: 0; border-radius: 12px; }

/* ------------------------------------------------------------------ formulario de contratación */
.pedido { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 960px) { .pedido { grid-template-columns: 1fr; } }
.formulario fieldset { border: 0; border-top: 1px solid var(--borde); margin: 0; padding: 24px 0 8px; }
.formulario legend { float: left; width: 100%; padding: 0 0 16px; font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -0.03em; }
.campos { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.campos .ancho { grid-column: 1 / -1; }
@media (max-width: 620px) { .campos { grid-template-columns: 1fr; } }
.campo label { display: block; font-size: 14px; font-weight: 500; color: var(--texto-2); margin-bottom: 7px; }
.campo label .opcional { color: var(--texto-3); font-weight: 400; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--borde-fuerte);
  background: var(--superficie); color: var(--texto-1); font: 400 16px/1.4 var(--sans); appearance: none; -webkit-appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.campo select { padding-right: 38px; background: var(--superficie) no-repeat right 14px center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238f8f8f' stroke-width='2'/%3E%3C/svg%3E"); }
.campo textarea { min-height: 128px; resize: vertical; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--texto-3); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.campo [aria-invalid='true'] { border-color: var(--error); }
.campo .ayuda { margin-top: 6px; font-size: 13px; color: var(--texto-3); }
.campo .error-campo { margin-top: 6px; font-size: 13px; color: var(--error); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.enviar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding-top: 24px; border-top: 1px solid var(--borde); margin-top: 16px; }
.enviar p { font-size: 14px; color: var(--texto-3); max-width: 46ch; }
.aviso { margin-top: 20px; padding: 16px 18px; border-radius: 8px; border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto-1); }
.aviso[data-tipo='error'] { border-color: var(--error); }
.aviso p + p, .aviso p + .cierre-acciones { margin-top: 10px; }
.aviso[hidden] { display: none; }
.costado { position: sticky; top: 96px; display: grid; gap: 20px; }
.costado-bloque { border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; }
.costado-bloque h2 { font-size: 1.3rem; letter-spacing: -0.03em; line-height: 1.1; }
.costado-bloque p { margin-top: 8px; color: var(--texto-2); font-size: 15px; }
.costado-bloque .redes { margin-top: 14px; }
@media (max-width: 960px) { .costado { position: static; } }

/* ------------------------------------------------------------------ página simple */
.pagina-cabeza { padding-block: clamp(32px, 6vw, 80px) clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--borde); }
.pagina-cabeza h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); max-width: 14ch; }
.pagina-cabeza .bajada { margin-top: 18px; max-width: 56ch; }

/* ------------------------------------------------------------------ pie */
.pie { margin-top: 0; border-top: 1px solid var(--borde); padding-block: 48px 32px; color: var(--texto-3); font-size: 15px; }
.pie-grilla { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.pie img { width: 96px; }
.pie h2 { font: 500 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-3); margin-bottom: 12px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie a { text-decoration: none; color: var(--texto-2); }
.pie a:hover { color: var(--acento); }
.pie-final { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; }
.pie-final a { color: var(--texto-3); }
.pie-lema { margin-top: 14px; max-width: 32ch; }
@media (max-width: 860px) { .pie-grilla { grid-template-columns: 1fr 1fr; } .pie-grilla > :first-child, .pie-grilla > :nth-child(3) { grid-column: 1 / -1; } }
.pie a[href^='mailto:'] { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}