/* p-anuncios.css · /anuncios/ · clases con prefijo an- · solo var(--…) de tokens.css */

/* ---- marcos: una plantilla real, escalada ---- */
.an .hero h1,.an .sec-head h2{text-wrap:balance}
.an-fr{position:relative;width:100%;max-width:var(--mx,100%);min-width:0}
.an-cap{font-size:var(--t-12);line-height:1.35;color:var(--texto-2);margin:var(--s-8) 0 0}
.an-cap b{display:block;font-size:var(--t-15);color:var(--texto)}
/* la misma pieza con y sin botón, una sobre otra: el interruptor muestra una u otra */
.an-pila>.scaled{transition:opacity var(--dur-micro) var(--mov-micro)}
.an-pila>.scaled.an-con{position:absolute;left:0;top:0;width:100%;opacity:0}
.an-anat.on .an-con,.an-var.on .an-con{opacity:1}
.an-anat.on .an-sin,.an-var.on .an-sin{opacity:0}

/* ---- interruptor (el de la marca: cápsula vertical, el botón sube y se enciende) ---- */
.an-tog{display:inline-flex;align-items:center;gap:var(--s-12);min-height:var(--tocable);padding:0;border:0;background:transparent;font:inherit;font-size:var(--t-15);font-weight:var(--bold);color:var(--texto);cursor:pointer;text-align:left}
.an-tog-sw{position:relative;display:block;width:24px;height:42px;border:var(--borde-encendido) solid var(--control-apagado);border-radius:var(--r-pill);flex:none;transition:border-color var(--dur-estado) var(--mov-estado)}
.an-tog-sw b{position:absolute;left:50%;bottom:3px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--control-apagado);transition:transform var(--dur-estado) var(--mov-estado),background var(--dur-estado) var(--mov-estado)}
.an-tog[aria-checked="true"] .an-tog-sw{border-color:var(--acento)}
.an-tog[aria-checked="true"] .an-tog-sw b{transform:translateY(-19px);background:var(--acento)}
.an-tog small{display:block;font-size:var(--t-12);font-weight:var(--regular);color:var(--texto-2);max-width:32em}

/* ---- las tres entradas ---- */
.an-hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--medianil)}
.an-ent{display:flex;flex-direction:column;min-width:0;border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);overflow:hidden;background:var(--fondo);color:inherit;text-decoration:none;transition:border-color var(--dur-micro) var(--mov-micro)}
.an-ent:hover{border-color:var(--texto-2)}
.an-ent[aria-current="page"]{border-color:var(--acento)}
.an-ent-vis{display:grid;place-items:center;height:268px;padding:var(--s-24);background:var(--superficie);overflow:hidden}
.an-ent-txt{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-8);flex:1;padding:var(--s-16) var(--s-24) var(--s-24)}
.an-ent-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.an-ent-txt .n{font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2)}
.an-ent-txt h3{font-size:var(--t-24);letter-spacing:var(--trk-24);line-height:1.1}
.an-ent-txt p{margin:0;font-size:var(--t-15);color:var(--texto-2)}
.an-prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--borde);border-radius:0 0 var(--r-captura) var(--r-captura);overflow:hidden}
.an-prog b{display:block;width:38%;height:100%;background:var(--acento)}
/* el anuncio de búsqueda, dibujado neutro: el color lo pone Google */
.an-gb{width:100%;padding:var(--s-16);background:var(--blanco);color:var(--tinta);border:var(--borde-ancho) solid var(--linea);border-radius:12px;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.4}
.an-gb-top{font-size:12px;color:var(--pizarra)}.an-gb-top b{color:var(--tinta)}
.an-gb-t{margin-top:6px;font-size:17px;font-weight:700;line-height:1.3}
.an-gb-d{margin-top:6px;color:var(--pizarra)}
.an-gb-l{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:12px;font-weight:700}

/* ---- la idea ---- */
.an-idea{align-items:start}
@media (min-width:901px){.an-idea{grid-template-columns:minmax(0,1fr) 340px}}
.an-izq{display:flex;flex-direction:column;gap:var(--s-24);min-width:0}
.an-lista{list-style:none;margin:0;padding:0}
.an-lista li{padding:var(--s-12) 0;border-top:var(--borde-ancho) solid var(--borde);font-size:var(--t-17);line-height:var(--lh-cuerpo);color:var(--texto-2);max-width:none}
.an-lista li:last-child{border-bottom:var(--borde-ancho) solid var(--borde)}
.an-lista b{color:var(--texto)}
.an-prueba-t{margin:0;color:var(--texto-2);font-size:var(--t-15)}.an-prueba-t b{color:var(--texto)}
.an-prueba{display:flex;flex-direction:column;gap:var(--s-16)}
.an-prueba-bar{display:flex;align-items:center;gap:var(--s-16);font-size:var(--t-15);font-weight:var(--bold)}
.an-prueba-bar input{flex:1;max-width:320px;accent-color:var(--acento)}
.an-prueba-bar output{min-width:5ch;font-variant-numeric:tabular-nums;color:var(--texto-2);font-weight:var(--regular)}
.an-prueba .filtros{margin:0}
.an-prueba-fr{width:var(--pw,270px);max-width:100%;min-height:425px}

/* ---- anatomía ---- */
.an-anat{align-items:start;gap:var(--s-48)}
.an-lado{display:flex;flex-direction:column;gap:var(--s-16);min-width:0}
.an-mk{position:absolute;z-index:3;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--fondo);border:var(--borde-encendido) solid var(--texto);color:var(--texto);font-style:normal;font-size:var(--t-12);font-weight:var(--bold);display:grid;place-items:center;font-variant-numeric:tabular-nums;transition:background var(--dur-micro) var(--mov-micro),color var(--dur-micro) var(--mov-micro),opacity var(--dur-estado) var(--mov-estado)}
.an-mk.hl{background:var(--texto);color:var(--fondo)}
.an-anat:not(.on) .an-mk[data-mk="3"]{opacity:0}
.an-reglas{list-style:none;margin:0;padding:0}
.an-reglas li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--s-12);padding:var(--s-12) 0;border-top:var(--borde-ancho) solid var(--borde);font-size:var(--t-15);line-height:var(--lh-cuerpo);transition:background var(--dur-micro) var(--mov-micro)}
.an-reglas li:last-child{border-bottom:var(--borde-ancho) solid var(--borde)}
.an-reglas .n{font-variant-numeric:tabular-nums;font-weight:var(--bold);color:var(--texto-2)}
.an-reglas b{color:var(--texto)}
.an-reglas span:last-child{color:var(--texto-2)}
.an-reglas li.hl{background:var(--superficie)}

/* ---- zonas seguras ---- */
.an-ley{display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-24);list-style:none;margin:0 0 var(--s-24);padding:0;font-size:var(--t-12);color:var(--texto-2)}
.an-ley li{display:flex;align-items:center;gap:var(--s-8);max-width:none;font-size:var(--t-12);color:var(--texto-2)}
.an-ley i{display:block;width:28px;height:18px;box-sizing:border-box;flex:none}
.an-sw-caja{border:var(--borde-encendido) dashed var(--acento);background:var(--fondo)}
.an-sw-tapa{background:color-mix(in srgb,var(--acento) 10%,transparent);border:var(--borde-ancho) solid var(--borde)}
.an-sw-l30{height:0!important;border-top:2px dashed var(--texto)}
.an-zp{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-48);align-items:start}
.an-zfr{display:flex;flex-wrap:wrap;gap:var(--s-24);align-items:flex-start}
.an-zfr .an-fr{width:var(--mx)}
.an-zn{position:absolute;inset:1px;z-index:2;pointer-events:none;opacity:0;overflow:hidden;border-radius:calc(var(--r-captura) - 1px);transition:opacity var(--dur-estado) var(--mov-estado)}
.an-zonas.on .an-zn{opacity:1}
.an-v{position:absolute;background:color-mix(in srgb,var(--acento) 10%,transparent)}
.an-caja{position:absolute;box-sizing:border-box;outline:var(--borde-encendido) dashed var(--acento);outline-offset:4px}
.an-lbl{display:inline-block;font-style:normal;font-weight:var(--bold);font-size:var(--t-12);line-height:1;padding:4px 8px;border-radius:var(--r-pill);background:var(--elevado);color:var(--texto);border:var(--borde-ancho) solid var(--borde);white-space:nowrap}
.an-l30{position:absolute;left:0;right:0;border-top:2px dashed var(--texto)}
.an-l30>.an-lbl{position:absolute;right:4px;top:-9px;font-size:10px;padding:3px 6px}
.an-vl{position:absolute;top:0;bottom:0;border-left:var(--borde-encendido) dashed var(--texto-2)}
.an-tapa{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center}
.an-zp .kv{margin-bottom:var(--s-16)}
.an-zp .kv dd{max-width:34em}

/* ---- tablas ---- */
.an-tabla td{font-size:var(--t-15);vertical-align:middle}
.an-tabla td:first-child{font-weight:var(--bold);white-space:nowrap}
.an-tabla td:nth-child(2),.an-tabla td:nth-child(3){white-space:nowrap}
.an-tabla td .muted{font-size:var(--t-12)}
.an-td{white-space:nowrap}.an-td .btn+.btn{margin-left:var(--s-8)}
details.mas .kv dd{max-width:44em}

/* ---- plantillas oficiales ---- */
.an-gm,.an-gg{display:flex;flex-wrap:wrap;gap:var(--s-32);align-items:flex-start}
.an-fig{flex:0 1 var(--mx);width:min(100%,var(--mx))}
.an-col{display:flex;flex-direction:column;gap:var(--s-24);flex:0 1 var(--mx);width:min(100%,var(--mx));min-width:0}
.an-col .an-fig{flex:none;width:100%}
.an-fig figcaption b{display:block;color:var(--texto)}
.an-fig figcaption p{margin:var(--s-4) 0 0;font-size:var(--t-15);color:var(--texto-2)}
.an-gd{width:100%;background:var(--blanco);color:var(--tinta);border:var(--borde-ancho) solid var(--linea);border-radius:12px;overflow:hidden;font-family:Arial,Helvetica,sans-serif}
.an-gd-img .scaled{border:0;border-radius:0}
.an-gd-in{padding:12px 16px 14px}
.an-gd-org{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--pizarra)}
.an-gd-org b{color:var(--tinta)}
.an-gd-org span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:var(--borde-ancho) solid var(--linea);background:var(--blanco)}
.an-gd-org img{width:11px;height:auto}
.an-gd-t{margin-top:10px;font-size:16px;font-weight:700;line-height:1.3}
.an-gd-d{margin:4px 0 0;font-size:13px;line-height:1.4;color:var(--pizarra);max-width:none}
.an-gd-b{display:flex;justify-content:flex-end;margin-top:12px}
.an-gd-b em{font-style:normal;font-size:13px;font-weight:700;border:var(--borde-ancho) solid var(--linea);border-radius:var(--r-pill);padding:7px 16px;color:var(--tinta)}

/* el anuncio en el feed de Meta, dibujado neutro: la cuenta, el texto y el botón los pone Meta */
.an-mf{width:100%;background:var(--blanco);color:var(--tinta);border:var(--borde-ancho) solid var(--linea);border-radius:12px;overflow:hidden;font-family:Arial,Helvetica,sans-serif}
.an-mf-cab{display:flex;align-items:center;gap:8px;padding:10px 12px}
.an-mf-cab>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:var(--borde-ancho) solid var(--linea);background:var(--blanco);flex:none}
.an-mf-cab img{width:14px;height:auto}
.an-mf-cab b{display:block;font-size:13px;line-height:1.25}
.an-mf-cab em{display:block;font-style:normal;font-size:12px;line-height:1.3;color:var(--pizarra)}
.an-mf-tx{margin:0;padding:0 12px 10px;font-size:13px;line-height:1.4;max-width:none}
.an-mf-tx em{font-style:normal;color:var(--pizarra)}
.an-mf .scaled{border:0;border-radius:0}
.an-mf-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--papel)}
.an-mf-bar span{display:block;font-size:12px;line-height:1.3;color:var(--pizarra)}
.an-mf-bar b{display:block;font-size:14px;line-height:1.3}
.an-mf-bar em{font-style:normal;font-size:13px;font-weight:700;white-space:nowrap;padding:7px 12px;border-radius:6px;background:var(--linea)}

/* las pestañas del sitio traen una barra vertical diminuta; aquí solo se desplazan a los lados */
.an .tabs{overflow-y:hidden;scrollbar-width:none;margin-bottom:var(--s-24)}
.an .tabs::-webkit-scrollbar{display:none}

/* ---- las tres variantes ---- */
.an-vp{display:flex;flex-wrap:wrap;gap:var(--s-32);align-items:flex-start}
.an-vf{flex:0 1 var(--mx);width:min(100%,var(--mx))}
.an-vi{flex:1 1 300px;min-width:0}
.an-vi .kv{margin-bottom:var(--s-16)}
.an-vi .kv dd{max-width:34em}
.an-vi details.mas{margin-top:var(--s-24)}
.an-adm{margin-bottom:var(--s-8)}
.an-adm dt{font-size:var(--t-12);text-transform:uppercase;letter-spacing:var(--trk-eyebrow);padding-top:3px}
.an-vi .acciones .copy{font-family:inherit;font-size:var(--t-15);padding:6px 16px;border-radius:var(--r-pill)}
.an-vi .tiny{margin:var(--s-8) 0 0}

/* ---- lo que no se hace ---- */
.an-pares{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-48) var(--s-48)}
.an-par{min-width:0}
.an-par>h3{margin-bottom:var(--s-12);font-size:var(--t-19);letter-spacing:var(--trk-19)}
.an-pares .pair{gap:var(--s-16)}

@media (max-width:900px){
  .an-hub{grid-template-columns:minmax(0,1fr)}
  .an-ent-vis{height:300px}
  .an-zp{grid-template-columns:minmax(0,1fr)}
  .an-zfr .an-fr{width:100%;max-width:var(--mx)}
  .an-pares{grid-template-columns:minmax(0,1fr)}
  .an-pares .pair{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .an-ent-vis{height:232px;padding:var(--s-16)}
  .an .kv{grid-template-columns:minmax(0,1fr);gap:0}
  .an .kv dt{margin-top:var(--s-12)}
  .an .kv dd{max-width:none}
  .an-gb-t{font-size:15px}
  .an-lbl{font-size:10px;padding:3px 6px}
}

/* celular: las dos tablas pasan a lista (nada queda escondido a la derecha) */
@media (max-width:700px){
  .an-tabla thead{display:none}
  .an-tabla,.an-tabla tbody,.an-tabla tr,.an-tabla td{display:block;width:100%}
  .an-tabla tr{padding:var(--s-12) 0;border-bottom:var(--borde-ancho) solid var(--borde)}
  .an-tabla td{border:0;padding:2px 0;white-space:normal!important}
  .an-tabla td:first-child{font-size:var(--t-17)}
  .an-tabla td:nth-child(3):not(.an-td)::before{content:"Zona segura: ";color:var(--texto-2)}
  .an-tabla td:nth-child(4):not(.an-td)::before{content:"La imagen lleva: ";color:var(--texto-2)}
  .an-tabla td:nth-child(5):not(.an-td)::before{content:"Lo pone la plataforma: ";color:var(--texto-2)}
  .an-tabla td:nth-child(3):not(.an-td),.an-tabla td:nth-child(4):not(.an-td),.an-tabla td:nth-child(5):not(.an-td){color:var(--texto-2)}
  .an-td{display:flex!important;flex-wrap:wrap;gap:var(--s-8);padding-top:var(--s-8)!important}
  .an-td .btn+.btn{margin-left:0}
}
/* celular: marcas numeradas más chicas (an-mk) */
@media (max-width:620px){.an-mk{width:18px;height:18px;margin:-9px 0 0 -9px;font-size:10px}}

/* el interruptor comparte fila con las pestañas cuando cabe; si no, va encima */
.an-tt{position:relative}
.an-tt>.an-tog{margin-bottom:var(--s-8)}
@media (min-width:1280px){
  .an-tt>.an-tog{position:absolute;right:0;top:0;margin:0;z-index:2}
  .an-tt .tabs{padding-right:250px}
}