/*
 * La pagina publica de un anuncio: `site/adShare/{id}`. 2.8.43.217.
 *
 * ES UNA PAGINA DE PUBLICIDAD, NO UNA PANTALLA DEL SITIO. Eudes: «debe verse como lo que es, como
 * un anuncio y que cumpla sus funciones de anunciar». Por eso esta hoja es SUYA y no vive dentro
 * de `classicspark-ads.css` -que es la del asistente y la ficha, dos pantallas privadas-: son
 * publicos distintos y se van a mover en direcciones distintas.
 *
 * La paleta si es la misma, y a proposito: por muy publicitaria que sea, esta pagina tiene que
 * parecer de Classicspark. Los tokens estan copiados de `classicspark-ads.css` porque esta hoja se
 * carga sola -sin la otra- y `:root` no se hereda de un fichero que no esta.
 */
:root{--ad217-red:#d5003b;--ad217-red-dark:#ab002f;--ad217-ink:#302d42;--ad217-muted:#77717f;--ad217-line:#eadfe2;--ad217-soft:#fff5f7}

/* ------------------------------------------------------------------ La barra de arriba */
/*
 * TRES COSAS Y NADA MAS: volver -si procede-, el logo, y «anunciate». El menu de la aplicacion
 * -«Mi espacio», «Descubrir», «Eventos», «Canales», «Chat», «Clases»- eran SEIS salidas de la
 * pagina puestas justo encima de lo unico que la persona vino a ver, y ademas no le decian nada a
 * quien no tiene cuenta, que es casi todo el que abre este enlace.
 */
.cs217-topbar{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--ad217-line);background:rgba(255,255,255,.92);backdrop-filter:blur(10px)}
.cs217-topbar__inner{display:flex;align-items:center;gap:14px;width:min(1180px,calc(100% - 32px));margin:0 auto;min-height:64px}
.cs217-topbar__brand{display:inline-flex;margin-right:auto}
.cs217-topbar__brand img{height:32px;width:auto}
.cs217-topbar__back{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--ad217-line);border-radius:11px;color:var(--ad217-ink);font-size:13px;font-weight:700;text-decoration:none;transition:border-color .18s,background .18s,transform .18s}
.cs217-topbar__back:hover{border-color:#e2b9c6;background:var(--ad217-soft);color:var(--ad217-ink);text-decoration:none;transform:translateX(-2px)}
.cs217-topbar__cta{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:11px;background:var(--ad217-red);color:#fff;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .18s,transform .18s,box-shadow .18s}
.cs217-topbar__cta:hover{background:var(--ad217-red-dark);color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 8px 20px rgba(213,0,59,.24)}

/* ------------------------------------------------------------------ El cuerpo */
.cs217-ad{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:28px 0 56px;color:var(--ad217-ink)}
.cs217-ad h1,.cs217-ad h2{margin:0;line-height:1.12}
.cs217-ad p{margin:0}

/*
 * EL ANUNCIO, EN DOS COLUMNAS: la imagen a la izquierda y todo lo pulsable a la derecha. La
 * proporcion favorece a la imagen -es el anuncio- pero no tanto como para que la llamada a la
 * accion caiga por debajo del doblez en un portatil.
 */
.cs217-hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:30px;align-items:center;padding:26px;border:1px solid var(--ad217-line);border-radius:26px;background:linear-gradient(140deg,#fff 0,#fffafb 62%,#fdeef2 100%);box-shadow:0 22px 60px rgba(62,38,45,.08)}
.cs217-hero__media{margin:0;border-radius:20px;overflow:hidden;background:#f7f1f3;aspect-ratio:4/3}
.cs217-hero__media img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;transition:transform .5s ease}
.cs217-hero:hover .cs217-hero__media img{transform:scale(1.02)}
.cs217-hero__body{display:flex;flex-direction:column;gap:16px;min-width:0}
.cs217-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cs217-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--ad217-red);color:#fff;font-size:11px;font-weight:800;letter-spacing:.09em}
.cs217-where{display:inline-flex;align-items:center;gap:7px;color:var(--ad217-muted);font-size:13px;font-weight:600}
.cs217-where>i{color:var(--ad217-red)}
/* El titulo se lee desde lejos: antes era un `<h2>` dentro de un `<p>`, con el tamano por defecto. */
.cs217-hero h1{font-size:clamp(27px,3.1vw,42px);font-weight:800;letter-spacing:-.015em}
.cs217-lead{color:#5c5566;font-size:16px;line-height:1.62}

/* ------------------------------------------------------------------ El contacto */
/*
 * LO MAS IMPORTANTE DE LA PAGINA, Y HASTA HOY NO EXISTIA: `qit_ad.linkto` se guardaba y no se
 * pintaba en ningun sitio. Va en una caja con fondo propio para que se distinga de los otros dos
 * botones -que son secundarios- sin necesidad de que nadie lea nada.
 */
.cs217-contact{padding:18px;border:1px solid #f2cdd8;border-radius:18px;background:#fff}
.cs217-contact__head{display:flex;gap:13px;margin-bottom:14px}
.cs217-contact__head>i{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:13px;background:var(--ad217-soft);color:var(--ad217-red);font-size:17px}
.cs217-contact__head strong{display:block;font-size:16px}
.cs217-contact__head p{margin-top:3px;color:var(--ad217-muted);font-size:13px;line-height:1.5}
.cs217-contact__link{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:13px;background:var(--ad217-red);color:#fff;text-decoration:none;animation:cs217-aparece .28s ease}
.cs217-contact__link:hover{background:var(--ad217-red-dark);color:#fff;text-decoration:none}
.cs217-contact__link>i{font-size:19px}
.cs217-contact__link small{display:block;font-size:11px;opacity:.86}
.cs217-contact__link strong{display:block;font-size:17px;word-break:break-word}
.cs217-contact__error{margin-top:10px!important;color:#9d1739;font-size:13px}
@keyframes cs217-aparece{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------ Los botones */
.cs217-actions{display:flex;flex-wrap:wrap;gap:10px}
.cs217-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 18px;border:1px solid var(--ad217-line);border-radius:13px;background:#fff;color:var(--ad217-ink);font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;transition:border-color .18s,background .18s,transform .18s,box-shadow .18s}
.cs217-btn:hover{border-color:#e2b9c6;background:var(--ad217-soft);color:var(--ad217-ink);text-decoration:none;transform:translateY(-1px)}
.cs217-btn>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs217-btn.is-primary{width:100%;border-color:var(--ad217-red);background:var(--ad217-red);color:#fff}
.cs217-btn.is-primary:hover{background:var(--ad217-red-dark);border-color:var(--ad217-red-dark);color:#fff;box-shadow:0 10px 24px rgba(213,0,59,.26)}
.cs217-btn.is-primary:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.cs217-btn.is-light{border-color:transparent;background:#fff;color:var(--ad217-red)}
.cs217-btn.is-light:hover{background:#fff;color:var(--ad217-red-dark);transform:translateY(-1px)}

/* ------------------------------------------------------------------ Quien publica */
.cs217-author{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--ad217-line);border-radius:15px;background:#fff;color:var(--ad217-ink);text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s}
.cs217-author:hover{border-color:#e2b9c6;color:var(--ad217-ink);text-decoration:none;transform:translateY(-1px);box-shadow:0 10px 26px rgba(62,38,45,.08)}
.cs217-author img{flex:0 0 48px;width:48px;height:48px;border-radius:50%;object-fit:cover}
.cs217-author span{display:grid;min-width:0;margin-right:auto}
.cs217-author small{color:var(--ad217-muted);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cs217-author strong{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs217-author>i{color:var(--ad217-red)}

/* ------------------------------------------------------------------ El foco
   2.8.43.218 - EL CONTACTO SE VEIA ROJO OSCURO SOBRE ROJO, y no era el color que escribi.

   Eudes: «el contacto casi no se ve por el contraste de color». La hoja dice `color:#fff`; en su
   captura el texto era #8b001e. Viene de una regla global del sitio, `a:focus, a:hover
   {color:#8b001e}`, que tiene elemento + pseudoclase y por eso le gana a `.cs217-contact__link`
   (una sola clase). Y el script de la pagina hace `enlace.focus()` al revelar el numero, para que
   el teclado llegue a el: justo en el momento en que aparece, se pintaba casi invisible. Con el
   raton encima no se notaba -gana `:hover`, que si estaba escrita-; en cuanto el raton se va, si.

   El banco de la .217 no lo vio porque solo cargaba esta hoja, no las del sitio. El de la .218
   pinta la pagina con `header.php` de verdad y mira el color CON FOCO Y SIN RATON.

   Se fija el color de cada enlace de estas dos paginas en `:focus` con dos clases de peso, y se le
   da al foco un anillo visible: quitar el color de foco sin poner nada a cambio dejaria a quien
   navega con teclado sin saber donde esta. */
.cs217-contact__link:focus,.cs217-contact__link:focus-visible{color:#fff;text-decoration:none;outline:3px solid rgba(213,0,59,.32);outline-offset:3px}
.cs217-topbar__cta:focus{color:#fff;text-decoration:none}
.cs217-topbar__back:focus,.cs217-btn:focus,.cs217-author:focus{color:var(--ad217-ink);text-decoration:none}
.cs217-btn.is-primary:focus{color:#fff}
.cs217-btn.is-light:focus{color:var(--ad217-red)}
.cs216-gone__actions a.is-primary:focus{color:#fff}
.cs216-gone__actions a.is-ghost:focus{color:var(--ad217-ink)}

/* ------------------------------------------------------------------ Mas anuncios */
.cs217-more{margin-top:36px}
.cs217-more header{margin-bottom:16px}
.cs217-more h2{font-size:20px;font-weight:800}
.cs217-more header p{margin-top:5px;color:var(--ad217-muted);font-size:14px}
/* 2.8.43.218 - CUATRO POR FILA, Y PEQUENAS. Eudes: «los anuncios de "sigue viendo anuncios" no
   deberian ser tan grandes, deberian ser 4 por fila para que no destaquen mas que el principal».
   Con `auto-fit` y un minimo de 240px, tres tarjetas se estiraban a 383px cada una, con una foto de
   290px de alto: casi tan grandes como el anuncio de arriba. Ahora son cuatro columnas fijas, de
   ~280px y foto 16/10, y un anuncio suelto se queda de su tamano en vez de ocupar la fila entera:
   que falte uno no se ve como un hueco, se ve como una tarjeta pequena. */
.cs217-more__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cs217-card{display:flex;flex-direction:column;border:1px solid var(--ad217-line);border-radius:14px;background:#fff;overflow:hidden;color:var(--ad217-ink);text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s}
.cs217-card:hover,.cs217-card:focus{border-color:#e2b9c6;color:var(--ad217-ink);text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 28px rgba(62,38,45,.10)}
.cs217-card__media{display:block;aspect-ratio:16/10;background:#f7f1f3;overflow:hidden}
.cs217-card__media img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;transition:transform .35s ease}
.cs217-card:hover .cs217-card__media img{transform:scale(1.04)}
.cs217-card__body{display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px 12px}
.cs217-card__body small{display:inline-flex;align-items:center;gap:5px;color:var(--ad217-muted);font-size:11px;font-weight:700;min-width:0}
.cs217-card__body small>i{color:var(--ad217-red)}
.cs217-card__body strong{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cs217-card__body em{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:2px;color:var(--ad217-red);font-size:12px;font-style:normal;font-weight:700}
.cs217-card:hover .cs217-card__body em>i{transform:translateX(3px)}
.cs217-card__body em>i{transition:transform .2s}

/* ------------------------------------------------------------------ Los dos ganchos */
.cs217-promos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px;margin-top:36px}
.cs217-promo{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px;border-radius:22px}
.cs217-promo>i{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;font-size:19px}
.cs217-promo h2{font-size:21px;font-weight:800}
.cs217-promo p{font-size:14px;line-height:1.6}
.cs217-promo .cs217-btn{margin-top:4px}
.cs217-promo--join{border:1px solid var(--ad217-line);background:#fff}
.cs217-promo--join>i{background:var(--ad217-soft);color:var(--ad217-red)}
.cs217-promo--join p{color:var(--ad217-muted)}
/* El de anunciarse va en color: es el que vende el producto que paga el sitio. */
.cs217-promo--ads{background:linear-gradient(135deg,var(--ad217-red) 0,#a4002d 100%);color:#fff;box-shadow:0 20px 48px rgba(213,0,59,.24)}
.cs217-promo--ads>i{background:rgba(255,255,255,.18);color:#fff}
.cs217-promo--ads p{color:rgba(255,255,255,.9)}

/* ------------------------------------------------------------------ La linea legal */
.cs217-legal{border-top:1px solid var(--ad217-line);background:#fff}
.cs217-legal__inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;width:min(1180px,calc(100% - 32px));margin:0 auto;padding:18px 0}
.cs217-legal__brand img{height:24px;width:auto}
.cs217-legal span{color:var(--ad217-muted);font-size:12px}
.cs217-legal ul{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 0 auto;padding:0;list-style:none}
.cs217-legal a{color:var(--ad217-muted);font-size:12px;text-decoration:none}
.cs217-legal a:hover{color:var(--ad217-red);text-decoration:none}

/* ------------------------------------------------------------------ «Ya no esta disponible» */
/*
 * 2.8.43.216, TRAIDA AQUI EN LA .217. Vivia en `classicspark-ads.css` -la hoja del asistente y de
 * la ficha privada-, y no es su sitio: esta pantalla es la OTRA cara de la pagina publica del
 * anuncio, la que ve quien abre un enlace que ya no lleva a ningun sitio. Las dos comparten barra,
 * pie y paleta, asi que comparten hoja: asi no puede pasar que una se quede sin estilos porque la
 * otra cambio de `pageAsset`, que es exactamente el fallo que cometi al escribirla.
 */
/* 2.8.43.218 - «Asi de feo se ve». Era una frase sola en mitad de 60vh vacios. Ahora: el aviso en
   una tarjeta de la misma familia que la del anuncio, dos salidas, y debajo otros anuncios vivos.
   Sin anuncios debajo, la tarjeta queda centrada y el pie abajo del todo: `min-height` en el
   `main`, no un hueco escrito a mano. En la .219, sola tambien va a lo ancho: centrada en alto, no
   encogida a su texto. */
.cs216-gone{width:min(1180px,calc(100% - 32px));min-height:calc(100vh - 126px);margin:0 auto;padding:36px 0 56px;color:var(--ad217-ink)}
/* 2.8.43.219 - DEL ANCHO DE LA REJILLA, no una tarjeta de 620px flotando sobre cuatro de 285. Eudes:
   «la seccion no puede ser del mismo ancho que el espacio de los otros anuncios?». El texto sigue
   centrado y con su propio tope de lectura (`p`), que es lo que no debe estirarse. */
.cs216-gone__notice{margin:0;padding:100px 32px;border:1px solid var(--ad217-line);border-radius:24px;background:linear-gradient(140deg,#fff 0,#fffafb 62%,#fdeef2 100%);box-shadow:0 22px 60px rgba(62,38,45,.08);text-align:center}
.cs216-gone:not(:has(.cs216-gone__more)){display:grid;align-items:center}
.cs216-gone__icon{display:inline-grid;place-items:center;width:58px;height:58px;margin-bottom:16px;border-radius:18px;background:var(--ad217-soft);color:var(--ad217-red);font-size:24px}
/* 2.8.43.219 - `display:block` PORQUE UNA HOJA GLOBAL PONE `h1{display:flex}`. En un flex el texto es
   un elemento del contenedor y `text-align:center` no lo mueve: el titulo salia pegado a la
   izquierda con el parrafo de debajo centrado. Lo vio Eudes en su captura; el banco medía el
   `text-align` calculado -que decia `center`- y no la caja. */
.cs216-gone h1{display:block;text-align:center;font-size:clamp(22px,2.4vw,28px);font-weight:800;line-height:1.2;color:var(--ad217-ink);margin:0 0 10px}
.cs216-gone__notice p{font-size:15px;line-height:1.6;color:var(--ad217-muted);margin:0 auto 24px;max-width:520px}
.cs216-gone__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cs216-gone__actions a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border:1px solid transparent;border-radius:13px;font-size:14px;font-weight:700;text-decoration:none;transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}
.cs216-gone__actions a.is-primary{background:var(--ad217-red);border-color:var(--ad217-red);color:#fff}
.cs216-gone__actions a.is-primary:hover{background:var(--ad217-red-dark);border-color:var(--ad217-red-dark);color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 10px 24px rgba(213,0,59,.24)}
.cs216-gone__actions a.is-ghost{background:#fff;border-color:var(--ad217-line);color:var(--ad217-ink)}
.cs216-gone__actions a.is-ghost:hover{background:var(--ad217-soft);border-color:#e2b9c6;color:var(--ad217-ink);text-decoration:none;transform:translateY(-1px)}
.cs216-gone__actions a.is-ghost>i{color:var(--ad217-red)}
.cs216-gone__more{margin-top:40px}

/* ------------------------------------------------------------------ Pantallas estrechas */
@media(max-width:900px){
 .cs217-hero{grid-template-columns:1fr;padding:16px;border-radius:20px;gap:20px}
 /* Y UN TECHO AL ALTO. Apilada, la imagen se lleva 521px de una tableta de 900 y empuja el
    boton de contacto por debajo del doblez: lo unico que la pagina quiere que se pulse queda
    fuera de la pantalla. `cover` recorta, que es lo que hace cualquier anuncio impreso. */
 .cs217-hero__media{aspect-ratio:16/10;max-height:340px}
 .cs217-promo{padding:22px}
 .cs217-more__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:680px){
 /* Dos por fila en el movil: una sola columna volvia a hacer cada tarjeta tan ancha como la pantalla. */
 .cs217-more__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .cs217-card__body strong{font-size:13px}
}
@media(max-width:560px){
 .cs217-ad{padding:18px 0 40px}
 .cs216-gone{padding:22px 0 40px}
 .cs216-gone__notice{padding:28px 18px;border-radius:20px}
 .cs216-gone__actions a{flex:1 1 100%}
 .cs217-topbar__inner{min-height:56px;gap:9px}
 .cs217-topbar__brand img{height:26px}
 .cs217-topbar__cta{padding:9px 12px}
 /* El rotulo del boton se va y queda el megafono: en 360px, «Publicar mi anuncio» al lado del
    logo y del «Volver» no cabe, y lo que se parte es la barra entera. */
 .cs217-topbar__cta>span{display:none}
 .cs217-topbar__back>span{display:none}
 /* Los dos botones secundarios a mitades: uno debajo del otro desperdicia una pantalla que ya va
    justa, y no caben en una fila con su texto entero. */
 /* 160 y no 140. Medido a 360px: con 140 caben dos columnas de 142px y el rotulo del sitio web
    -«tallerdepianos.cl»- NO CABE en las suyas, asi que sale recortado con puntos suspensivos. Un
    boton cuyo rotulo no se lee entero no invita a nada. Con 160 se parte en dos filas y se lee.
    Es el mismo fallo de la .216 -los botones que «se montan» son los que no caben, no los que se
    solapan- y esta vez lo cazo el banco de medidas antes que Eudes. */
 .cs217-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr))}
 .cs217-lead{font-size:15px}
 .cs217-more h2,.cs217-promo h2{font-size:19px}
 .cs217-legal ul{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
 .cs217-ad *,.cs217-topbar *{transition:none!important;animation:none!important}
}